三级菜单的实现

三级菜单的实现
三级菜单的实现与二级菜单相类似
实现方法有 jQuery js css
 html代码布局如下
<ul id="navmenu">
  <li><a href=""#>首页</a></li>
  <li><a href=""#>课程大厅</a></li>
  <li><a href=""#>学习中心 +</a>
       <ul>
        <li><a href="#">前端开发 +</a>
        <ul>
           <li><a href="">javascript</a></li>
           <li><a href="">css</a></li>
           <li><a href="">jquery</a></li>
         </ul>
        </li>
        <li><a href="">手机开发 +</a>
           <ul>
           <li><a href="">ios开发</a></li>
           <li><a href="">安卓开发</a></li>
           <li><a href="">wp开发</a></li>
         </ul>
        </li>
        <li><a href="">后端编程</a></li>
       </ul>
  </li>
  <li><a href=""#>关于我们</a></li>
 </ul>
 实现的方法  第一项 css
代码如下
body {
behavior:url(csshover.htc);  //解决浏览器对：hover兼容问题
}
* {
margin: 0;
padding: 0;
}
#navmenu {
font-size: 12px;
font-weight: bold;
list-style: none;
margin: 0 auto;
}
#navmenu li {
float: left;
margin-right: 1px;
}
#navmenu li a {
line-height: 20px;
text-decoration: none;
background-color: #ddd;
color: #666;
display: block;
width: 80px;
text-align: center;
}
#navmenu li ul {
display: none;
list-style: none;
position: relative;
/*padding: 0; */
}
#navmenu li a:hover {
background-color: #900;
color: white;
}
#navmenu li:hover ul {
display: block;      //显示二级菜单      
width: 80px;
}
#navmenu li:hover ul li ul {
display: none;          //当显示二级菜单时 三级菜单隐藏
}
#navmenu li ul li:hover ul{
display: block;  //显示三级菜单
top: 0px;
left: 80px;
position: absolute;
}


  三级菜单与二级菜单的实现思想相同 重要的是子菜单位置的确定


三级菜单 js的实现思想为 


 遍历li找到拥有子菜单的呢一项 为其绑定事件 


坑爹的ie
代码如下
window.onload = function() {
var Lis = document.getElementsByTagName("li");
for (var i = 0 ; i < Lis.length; i++) {
Lis[i].onmouseover = function () { 
var u=this.getElementsByTagName("ul")[0];
if (u !=undefined) {
u.style.display = "block";
}
} 
Lis[i].onmouseout = function () { 
var u=this.getElementsByTagName("ul")[0];
if (u !=undefined) {
u.style.display = "none";


 }
}
 }
}
三级菜单 jquery的实现
  $(function() {
$("li").has("ul").mouseover(function() {
$(this).children("ul").css("display","block");
})
                $("li").has("ul").mouseout(function() {
$(this).children("ul").css("display","none")
})
 $.support.leadingWhitespace
});