点击链接出现下拉菜单，知道鼠标在下拉菜单以外的地方点击，使得下拉菜单消失

例如百度，google上面的链接，点击链接之后，出现下拉菜单，鼠标离开不消失，知道鼠标点击菜单以外的地方，才会使下拉菜单消失。这样的功能怎么实现？谁能给个类似的代码参考一下？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

就是给document监听一个click事件$(document).click(function(e){
e = window.event||e;
    obj = e.srcElement ? e.srcElement : e.target;
    var id = obj.id;
    if(id != comboInputId){ // 如果不是点击输入框
     $comboContent.hide(); // $comboContent是下拉框部分
     return;
    }
});
可能我没有说明白，这面是一个下拉菜单，它只能通过点击“首页 ”标签才能显示和隐藏，我要的效果当鼠标离开下拉菜单的时候，菜单继续显示，直到鼠标点击“首页”标签或者是点击下拉菜单意外的部分使下拉菜单消失。（我刚刚开始接触JS，很多地方都不是很懂，假如有说错的地方，各位前辈多多包涵。）
代码：<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
    <style type="text/css">
    .menu {
    font-family: arial, sans-serif;

    margin:0;
    margin:0px 0;

    }
    .menu ul {
    padding:0;
    margin:0;
    list-style-type: none;
    }      .menu ul li {

    position:relative;
    width:200px;
    }      .menu ul li a, .menu ul li a:visited {
    display:block;
    text-align:center;
    text-decoration:none;
    width:104px;

    color:#000;

    border-width:1px 1px 0 0;
    background: #3333FF;
    line-height:30px;
    font-size:11px;
    }
    .menu ul li ul {

    display: none;
    }
    .menu ul li:hover a {
    color:#fff;
    background:#6699FF;
    }
    .menu ul li:hover ul {
  //  display:block;
    position:absolute;
    top:31px;
    left:0;
    width:105px;
    }
    .menu ul li:hover ul li a {
  //  display:block;
    background:#3333FF;
    color:#000;
    }
    .menu ul li:hover ul li a:hover {
    background:#6699FF;
    color:#000;
    }
    </style>
</head><body>
<div class="menu" >
<ul >
     <li><a  class="hide" href="javascript:show();" style="font-size: 15px;color: #ffffff; " >首页</a><div id="kk">
<ul id="context">
<li style="border:0px;"><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li style="border:0px;"><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li style="border:0px;"><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul></div>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
function show(){
var context = document.getElementById("context");
if(context.style.display == "block"){
context.style.display = "none";
} else{
context.style.display = "block";
}
}
</script>
</html>
<script type="text/javascript">
function show(){
  var context = document.getElementById("context");
  var dis=context.style.display;
  context.style.display=dis=="block"?"none":"block";
}document.onclick=function(event){
  e=event||window.event;
  var el=e.srcElement||e.target;
  if(el.parentNode.parentNode.id=='context'){
    context.style.display=dis=="none";
  }
}
</script>
上面几位的方法都很好  不过我和楼主一样都是刚学JS 很多东西都看不太懂
我想到一个比较笨的方法  暂时有用  就照楼主的代码加了些东西<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function show(){
var context = document.getElementById("context");
if(context.style.display == "block"){
context.style.display = "none";
} else{
context.style.display = "block";
}
};
function hide(){
var context = document.getElementById("context");
context.style.display = "none";
};
</script>
<style type="text/css">
.menu {
  font-family: arial, sans-serif;

  margin:0;
  margin:0px 0;

  }
  .menu ul {
  padding:0;
  margin:0;
  list-style-type: none;
  }     .menu ul li {

  position:relative;
  width:200px;
  }     .menu ul li a, .menu ul li a:visited {
  display:block;
  text-align:center;
  text-decoration:none;
  width:104px;

  color:#000;

  border-width:1px 1px 0 0;
  background: #3333FF;
  line-height:30px;
  font-size:11px;
  }
  .menu ul li ul {

  display: none;
  }
  .menu ul li:hover a {
  color:#fff;
  background:#6699FF;
  }
  .menu ul li:hover ul {
  // display:block;
  position:absolute;
  top:31px;
  left:0;
  width:105px;
  }
  .menu ul li:hover ul li a {
  // display:block;
  background:#3333FF;
  color:#000;
  }
  .menu ul li:hover ul li a:hover {
  background:#6699FF;
  color:#000;
  }
  #cc{width:100%;height:100%;position:absolute;left:0px;top:0px;}
</style>
</head>
<body>
<div id="cc" onclick="hide();"></div>
<div class="menu" >
<ul >
  <li><a class="hide" id="sy" href="javascript:show();" style="font-size: 15px;color: #ffffff; " >首页</a><div id="kk">
<ul id="context">
<li style="border:0px;"><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li style="border:0px;"><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li style="border:0px;"><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul></div>
</li>
</ul>
</div>
</body>
</html>
toury 的方法，点击标签时下拉标签会出来，但是要想下拉标签消失，除非再次点击标签呀还是不能实现功能。