js 菜单打开或关闭操作,该如何处理

js 菜单打开或关闭操作
<ul>
<li onclick=""displaySubMenu(this);""><a href="javascript:void(0);">主菜单</a>
 <ul>
  <li><a href="">子菜单1</a></li>
  <li><a href="">子菜单2</a></li>
  <li><a href="">子菜单3</a></li>
 </ul>
 </li>
</ul>
function displaySubMenu(t) {
 var subMenu = t.getElementsByTagName("ul")[0];
 if (subMenu.style.display == "block"){
  subMenu.style.display = "none";
 }else{
  subMenu.style.display = "block";
 }
}
上面是一个菜单点击打开子菜单，再次点击关闭子菜单的代码
但是用户如果打开后，不再次点击就无法关闭，我想用户在点击
网页其他任意位置，都会关闭这个菜单，这要怎么写呢？
------解决思路----------------------
body加个click事件  必要部分阻止冒泡