该导航菜单来自懒人图库网，懒人图库使用jquery+css结构实现的导航菜单，兼容IE6，96看吧推荐使用。
该jquery导航菜单使用jQuery类库实现，使用前记得引入该文件。
jQuery的代码核心部分：
- $(document).ready(function(){
- $(".menu li").hover(function(){
- $(this).addClass("hover");
- $(this).children("ul li").attr('class','');
- },function(){
- $(this).removeClass("hover");
- $(this).children("ul li").attr('class','');
- }
- );
- $(".menu li.no_sub").hover(function(){
- $(this).addClass("hover1");
- },function(){
- $(this).removeClass("hover1");
- }
- );
- })
style的核心部分：
- /*导航*/
- .menu{height:32px;font-family:"Microsoft Yahei",Tahoma, Geneva, sans-serif;padding-left:15px;_overflow:hidden}
- .menu a{color:#fff;height:16px;line-height:16px;float:left;position:relative}
- .top{background:#333;position:relative;z-index:2}
- .menu li{font-size:14px;float:left;position:relative;padding:8px 12px;}
- .menu li:hover{background-color:#fff;border:1px solid #629d2a;border-bottom:none;padding:8px 11px}
- .menu li:hover a{color:#357d13}
- .menu li.no_sub:hover{border:1px solid #629d2a;padding:7px 11px}
- .menu ul{width:250px;background-color:#fff;border:1px solid #629d2a;border-top:none;position:absolute;left:-1px;top:-999em;z-index:99999;padding:8px;display:none}
- .menu li:hover ul{top:31px;display:block}
- .menu li:hover ul li{font-size:12px;border:none;width:70px;float:left;padding:4px 0 4px 10px}
- .menu li:hover ul li a{color:#333;text-decoration:none;padding:0}
- .menu li:hover ul li a:hover{text-decoration:underline}
- /*IE6*/
- .menu li.hover{background-color:#fff;border:1px solid #629d2a;border-bottom:none;padding:8px 11px}
- .menu li.hover a{color:#357d13}
- .menu li.hover ul{top:31px;display:block}
- .menu li.hover ul li{border:none;width:70px;float:left;padding:4px 0 4px 10px}
- .menu li.hover ul li a{height:16px;line-height:16px;font-size:12px;color:#333;text-decoration:none;padding:0}
- .menu li.hover ul li a:hover{text-decoration:underline}
- .menu li.no_sub.hover1{border:1px solid #629d2a;padding:7px 11px}