<body> <div id="navigation" class="navigation"> <ul class='menu'> <li><a href=''>首页</a></li> <li><a href=''>网站推荐</a> <ul class='sub-menu'> <li><a href='menuList.aspx?menurank=3&&secondmenurank=1'>综合日用</a></li> <li><a href='menuList.aspx?menurank=3&&secondmenurank=2'>服装配饰</a></li> <li><a href='menuList.aspx?menurank=3&&secondmenurank=3'>母婴药房</a></li> <li><a href='menuList.aspx?menurank=3&&secondmenurank=1'>儿妆护肤</a></li> <li><a href='menuList.aspx?menurank=3&&secondmenurank=2'>天然有机</a></li> <li><a href='menuList.aspx?menurank=3&&secondmenurank=3'>儿童家具</a></li> <li><a href='menuList.aspx?menurank=3&&secondmenurank=1'>二手e淘</a></li> <li><a href='menuList.aspx?menurank=3&&secondmenurank=2'>名品汇聚</a></li> </ul> </li> <li><a href='#'>e站转运</a> <ul class='sub-menu'> <li><a href='menuList.aspx?menurank=3&&secondmenurank=1'>关于我</a></li> <li><a href='menuList.aspx?menurank=3&&secondmenurank=2'>转运需知</a></li> </ul> </li> <li><a href=''>e淘攻略</a></li> <li><a href='#'>e团精选</a> <ul class='sub-menu'> <li><a href='menuList.aspx?menurank=5&&secondmenurank=1'>常态精选</a></li> <li><a href='menuList.aspx?menurank=5&&secondmenurank=2'>限时特惠</a></li> </ul> </li> <li><a href=''>合作商家</a></li> <li><a href=''>时尚资讯</a></li> <li><a href=''>e站blog</a></li> <li><a href=''>我的购物车</a></li> </ul> </div> </body>
/* Main Menu */
.navigation{ float:left; margin:0px 0px 0px; width:100%; height:32px; background-color:White; overflow:visible;}
.menu{ float:left; width:100%; height:34px; padding:1px 10px; position:relative; z-index:300; font-weight:normal;}
.menu li{ width:135px; float:left; margin:0px; padding:0px; font-size:18px; text-align:center; white-space:nowrap; background-color:White; }
.menu li.homepage{ background:none;}
.menu li a:link, .menu li a:visited{ margin:0px; padding:5px 0px 5px 0px; color:black; text-decoration:none; display:block; background-color:White;}
.menu li a:hover{ color:#94C365; background-color:White;}
.menu li.current_page_item a:link, .menu li.current_page_item a:visited, .menu li.current_page_item a:hover, .menu li.current-menu-item a:link, .menu li.current-menu-item a:visited, .menu li.current-menu-item a:hover{ color:#94C365; }
.menu ul{ position:relative; z-index:300; background-color:White;}
.menu li{ position:relative;}
.menu li ul{ position:absolute; padding:0px; width:auto; min-width:135px; text-align:center; overflow:visible; left:0px; display:none;}
.menu li ul li{ margin:0px; width:auto; min-width:135px; text-align:center; overflow:visible; }
.menu li ul li a:hover{ color:#94C365; background-color:White; }
<script type="text/javascript"> window.onload = function () { document.querySelectorAll(".menu li").onmourseover = function () { this.querySelector("ul").style.display = "block"; } document.querySelectorAll(".menu li").onmourseout = function () { this.querySelector("ul").style.display = "none"; } } </script>
其实就是子菜单的隐藏与显示。li的float和子菜单的z-index