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>
<style>
     .b{
float:left;
width:100px;
line-height:30px;
height:30px;
list-style:none;
background:#CCC;
text-indent:25px;
}
     .b ul li{display:none;}
  </style>
</head>
  
 
 
<body>
   <ul id="menu">
<li class="b">aaaaaa
     <ul>
         <li>subli</li>
         <li>subli</li>
         <li>subli</li>
         <li>subli</li>
         <li>subli</li>
        </ul>
    </li>
<li class="b">aaaaaa
     <ul>
         <li>subli</li>
         <li>subli</li>
         <li>subli</li>
         <li>subli</li>
         <li>subli</li>
        </ul> 
    </li>
<li class="b">aaaaaa
         <ul>
         <li>subli</li>
         <li>subli</li>
         <li>subli</li>
         <li>subli</li>
         <li>subli</li>
        </ul>
      </li>
<li class="b">aaaaaa
        <ul>
         <li>subli</li>
         <li>subli</li>
         <li>subli</li>
         <li>subli</li>
         <li>subli</li>
        </ul>
    </li>
<li class="b">aaaaaa
       <ul>
         <li>subli</li>
         <li>subli</li>
         <li>subli</li>
         <li>subli</li>
         <li>subli</li>
        </ul> 
    </li>
</ul>
</body>
</html>
<script>
    var menuli=document.getElementById("menu").children;
//alert(menuli[1].innerHTML);
for(var i=0;i<menuli.length;i++)
{   
    
menuli.item(i).onmouseover=function(){
this.item(0).style.display="block";
}
}

    for(var i=0;i<menuli.length;i++)
{
menuli.item(i).onmouseout=function(){
menuli.item(0).style.display="none";
}
}
</script>

解决方案 »

  1.   

    lz的代码让我好费时间啊，后来发现是你那个css的问题。
    1.css部分 .b ul li{display:none;}要改成 .b ul{display:none;}，把li去掉
    2.js部分我重新写了
    var menuli=getElementByClass("b");
    for(var i=0;i<menuli.length;i++)
    {   

    menuli[i].onmouseover=function(){
    this.children[0].style.display="block";
    //this.getElementsByTagName("ul")[0].style.display="block";
    };
    menuli[i].onmouseout=function(){
    this.children[0].style.display="none";
    //this.getElementsByTagName("ul")[0].style.display="none";
    };
    }
    function getElementByClass(name)
    {
    var allElements = document.getElementsByTagName('*'); 
    var classElements = [];
    for(var a=0;a<allElements.length;a++)
    {
    if (allElements[a].className == name ) { 
    classElements[classElements.length] = allElements[a]; 
    }
    }
    return classElements;
    }
    我测试了一下，ie8和chrome都好用的