<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