下拉菜单怎么实现点击任何地方都关闭啊？现在只有点X才能关

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML><HEAD><TITLE>百度一下，你就知道</TITLE>
<META http-equiv=Content-Type content=text/html;charset=gb2312>
</head><style type="text/css">
.m{
border:1px solid #CCFF33;
width:10px;
float: right;
}
.z{
border:1px dotted #00CCFF;
width:50px;
top: 12px;
right: -60px;
position: absolute;
position:absolute;}
ul{
padding:0;
margin:0;
list-style:none;
display:none;
float: right;
}
.kk{

border: thin solid #006699;
width: 250px;
height: 50px;
position: relative;
}
.body{
text-align: center;
}
</style><body><div class="kk">
<div class="m" onClick="show()">x</div>
    <ul class="z" id="sL">
        <li>yyyyyyy</li>
        <li>yyyyyyy</li>
        <li>yyyyyyy</li>
        <li>yyyyyyy</li>
        <li>yyyyyyy</li>
    </ul>
</div>
<div class="kk"></div>
</body>
<script>
    function show()
    {
        var tag = document.getElementById("sL")
        if (tag.style.display=="none")
        {
            tag.style.display = "block"
        }else{
            tag.style.display = "none"
        }
    }
</script>
</html>

解决方案 »

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

<div class="m" onclick="show(true)" onMouseOut="show(false)">fghsgfsfsgd</div>
  <ul class="z" id="sL">
  <li>yyyyyyy</li>
  <li>yyyyyyy</li>
  <li>yyyyyyy</li>
  <li>yyyyyyy</li>
  <li>yyyyyyy</li>
  </ul>
</div><script>
  function show(bo)
  {
  var tag = document.getElementById("sL")
  if (bo)
  {
  tag.style.display = "block"
  }else{
  tag.style.display = "none"
  }
  }
</script>这样应该可以了
下拉列表你可以使用select标签。并在body标签中加上事件属性来完成你要的功能
<body><div class="kk"  id="divKK">
<div class="m" onClick="show()">x</div>
  <ul class="z" id="sL">
  <li>yyyyyyy</li>
  <li>yyyyyyy</li>
  <li>yyyyyyy</li>
  <li>yyyyyyy</li>
  <li>yyyyyyy</li>
  </ul>
</div>
<div class="kk"></div>
</body>
<script>
  function show()
  {
  var tag = document.getElementById("sL")
  if (tag.style.display=="none")
  {
  tag.style.display = "block"
  }else{
  tag.style.display = "none"
  }
  }window.onload=function(){document.getElementById("divKK").onclick=function(e){
if(e && e.stopPropagation){
  //W3C取消冒泡事件
  e.stopPropagation();
  }else{
  //IE取消冒泡事件
  window.event.cancelBubble = true;
  }
};
document.body.onclick=function(){
document.getElementById("sL").style.display = "none";
};
};
</script>
<script>
  function show()
  {
  var tag = document.getElementById("sL")
  if (tag.style.display=="none")
  {
  tag.style.display = "block"
  }else{
  tag.style.display = "none"
  }
  }
  document.onclick=new Function("show()");
</script>
在document上注册一个事件
var divId = ...// 获取你的层的Id
$(document).click(function(e){
e = window.event||e;
    obj = e.srcElement ? e.srcElement : e.target;
    var id = obj.id;
    if(id != divId){
     // ... 隐藏操作
     return;
    }
});
大体是这样的思路
楼主什么环境啊？我IE、FF测试都ok!!还是我没能明白你的意思呢？
  <ul class="z" id="sL"> 你要点击这个弹出菜单也关闭？
如果是，那么不要这个阻止事件冒泡的代码就可以了document.getElementById("divKK").onclick=function(e){
if(e && e.stopPropagation){
  //W3C取消冒泡事件
  e.stopPropagation();
  }else{
  //IE取消冒泡事件
  window.event.cancelBubble = true;
  }
};
<script type="text/javascript" language="javascript">
var tag = document.getElementById("sL");
document.onmousedown=(function (event)
{
    event = window.event|| event;
    obj = event.srcElement ? event.srcElement : event.target;
    var id = obj.id;
    if(id != tag.id)
    {
      tag.style.display="none";
      return;
    }}
);function show()
{
    tag.style.display=(tag.style.display=="none" || tag.style.display=="")?"block":"none";
}
</script>
$(document).click(function(e){
e = window.event||e;
obj = e.srcElement ? e.srcElement : e.target;
var id = obj.id;用触发事件对象的ID 判断是有问题的，因为，显示的ul 内部的 li a 等子元素都会事件冒泡到document！
而点击显示的这个ul,或者ul 内部的子元素，是不应该关闭的！
Menu.css  中的代码内容如下：
#main_menu * {
border:0 none;
padding:0;
}
#main_menu {
float:left;
line-height:20px;
list-style-type:none;
margin-bottom:10px;
}
#main_menu a {
display:block;
text-align:center;
width:160px;
}
#main_menu a:visited {
text-decoration:none;
}
#main_menu li a:hover {
background:none repeat scroll 0 0 #999999;
}
#main_menu li ul {
left:-999em;
line-height:20px;
list-style-type:none;
position:absolute;
text-align:left;
width:160px;
}
#main_menu li ul li {
background:none repeat scroll 0 0 #F6F6F6;
float:left;
width:160px;
}
#main_menu li ul a:visited {
color:#666666;
text-decoration:none;
}#main_menu li.hover_ie_fix ul {
left:auto;
}Menu.js  中代码内容如下：
function menu_ie_fix(){
     var Element = document.getElementById("main_menu").getElementsByTagName("li");
                for (var i=0; i<Element.length; i++){
             Element[i].onmouseover=function() {
              this.className+=(this.className.length>0? " ": "") + "hover_ie_fix";
             }              Element[i].onMouseDown=function(){
              this.className+=(this.className.length>0? " ": "") + "hover_ie_fix";
             }                 Element[i].onMouseUp=function()
{
this.className+=(this.className.length>0? " ": "") + "hover_ie_fix";
} Element[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp("( ?|^)hover_ie_fix\\b"),"");
}
}

} window.onload=menu_ie_fix;html  中代码内容如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
</head>
<link href="Menu.css" rel="stylesheet" type="text/css">
<script src="Menu.js" type="text/javascript"></script>
<body>
<div id="main_menu" class="site_nav_bar">
<div id="ServiceNavItem" class="site_nav_item">
<li class="">
<a href="#">服务支持</a>
<ul>
<li class="">
<a href="#">新闻公告</a>
</li>
<li class="">
<a href="#">资源下载</a>
</li>
<li class="">
<a href="#">问题解答</a>
</li>
</ul>
</li>
</div>
</div>
</body>
</html>