大家帮我看看..怎么让它鼠标移动到当前,其他的子菜单就关闭?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title> New Document </title>
  <style type="text/css">
.wrap{width:120px;border:1px solid orange}
*{padding:0;margin:0;}
ul{list-style:none}
ul ul{display:none}
#list .pore{position:relative;}
#list .pore ul{position:absolute;top:0;right:-122px;width:120px;border:1px solid green;overflow:hidden}
#list .pore ul li a{display:block;height:20px}
  </style> <script type="text/javascript">
var timer = null;
var arr = ["list"];
function mouseElem(){

this.getElementsByTagName("ul")[0].style.display = "block";
this.nextSibling.nextSibling.getElementsByTagName("ul")[0].style.display = "none";
this.previousSibling.previousSibling.getElementsByTagName("ul")[0].style.display = "none";

}
function mouseoutElem(){

var that = this;

timer = setTimeout(
function (){that.getElementsByTagName("ul")[0].style.display = "none";},10000);
} function list(){
for(var i=0; i<arr.length; i++){
var item = document.getElementById(arr[i]).getElementsByTagName("ul");
for(var j=0; j<item.length; j++){
item[j].parentNode.onmouseover = mouseElem;
item[j].parentNode.onmouseout =  mouseoutElem;
}
}
}
window.onload = list;
</script> </head> <body>
  
<div class="wrap">
<ul id="list">
<li class="pore">
<a href="">标题</a>
<ul>
<li><a href="">列表</a></li>
<li><a href="">列表</a></li>
<li><a href="">列表</a></li>
<li><a href="">列表</a></li>
<li><a href="">列表</a></li>
</ul>
</li>
<li class="pore">
<a href="">标题1</a>
<ul>
<li><a href="">列表</a></li>
<li><a href="">列表</a></li>
<li><a href="">列表</a></li>
<li><a href="">列表</a></li>
<li><a href="">列表</a></li>
</ul>
</li>
<li class="pore">
<a href="">标题2</a>
<ul>
<li><a href="">列表</a></li>
<li><a href="">列表</a></li>
<li><a href="">列表</a></li>
<li><a href="">列表</a></li>
<li><a href="">列表</a></li>
</ul>
</li>
</ul>
</div>
 </body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
     <head>
      <title> New Document </title>
      <style type="text/css">
        .wrap{width:120px;border:1px solid orange}
        *{padding:0;margin:0;}
        ul{list-style:none}
        ul ul{display:none}
        #list .pore{position:relative;}
        #list .pore ul{position:absolute;top:0;right:-122px;width:120px;border:1px solid green;overflow:hidden}
            #list .pore ul li a{display:block;height:20px}
      </style>    <script type="text/javascript">
            var old = null;
            var timer = null;
            var arr = ["list"];
                function mouseElem(){
                if(old) old.style.display="none"
                this.getElementsByTagName("ul")[0].style.display = "block";
                old = this.getElementsByTagName("ul")[0]         
                        //this.nextSibling.nextSibling.getElementsByTagName("ul")[0].style.display = "none";
                        //this.previousSibling.previousSibling.getElementsByTagName("ul")[0].style.display = "none";
                    
            }
            function mouseoutElem(){
                
                var that = this;
                old.style.display="none"
               // timer = setTimeout(
                    //function (){that.getElementsByTagName("ul")[0].style.display = "none";},10000);
            }        function list(){
                for(var i=0; i<arr.length; i++){
                    var item = document.getElementById(arr[i]).getElementsByTagName("ul");
                    for(var j=0; j<item.length; j++){
                        item[j].parentNode.onmouseover = mouseElem;
                        item[j].parentNode.onmouseout =  mouseoutElem;
                    }
                }
            }
    window.onload = list;
            </script> </head> <body>
      
    <div class="wrap">
        <ul id="list">
            <li class="pore">
                <a href="">标题</a>
                <ul>
                    <li><a href="">列表</a></li>
                    <li><a href="">列表</a></li>
                    <li><a href="">列表</a></li>
                    <li><a href="">列表</a></li>
                    <li><a href="">列表</a></li>
                </ul>
            </li>
            <li class="pore">
                <a href="">标题1</a>
                <ul>
                    <li><a href="">列表</a></li>
                    <li><a href="">列表</a></li>
                    <li><a href="">列表</a></li>
                    <li><a href="">列表</a></li>
                    <li><a href="">列表</a></li>
                </ul>
            </li>
            <li class="pore">
                <a href="">标题2</a>
                <ul>
                    <li><a href="">列表</a></li>
                    <li><a href="">列表</a></li>
                    <li><a href="">列表</a></li>
                    <li><a href="">列表</a></li>
                    <li><a href="">列表</a></li>
                </ul>
            </li>
        </ul>
    </div>
     </body>
    </html>
      

  2.   

    不行啊.鼠标移动的时候超过父容器高度的时候子菜单就隐藏了.
    就为了这个问题.我才设置setTimeout的
      

  3.   

            function mouseoutElem(){
                
                var that = this;
                //old.style.display="none"
            }你不想让他关掉就把那句注释掉好了