下拉菜單
（思路：先把二級定位到屏幕外，鼠標懸停重新定位回來；另一個就是ul浮動，li也浮動）
下拉菜單的一般思路就是把子導航嵌套在無序列表中，把列表定位到屏幕之外，當鼠標懸停在其父列表項上時，重新定位它。
有兩個問題需要注意，
第一個問題，列表項設置了float浮動，因此列表也要浮動已防止列表收縮：
ul.nav,ul.nav ul{float:left}
ul.nav li{float:left}
第二個問題，子導航的定位
ul.nav li ul{position:absolute;left:-999em}
ul.nav li:hover ul{left:auto}
一、CSS+JS下拉菜單
原理：一級菜單的li中包含二級菜單ul。在鼠標沒有移上去時，二級菜單的ul是display：none的狀態，鼠標一移上去變成display：block。改變這個display屬性值是通過JS來實現。鼠標hover時，把整個二級菜單的ul給display出來，用到的事件onmouseonver。鼠標移出又把整個二級菜單的ul 給隱藏掉。
nav-js.html文件
<!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <link href="nav-js.css" rel="stylesheet"> <script type="text/javascript"> //顯示子菜單 function showSubMenu(li){ var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "block"; } //隱藏子菜單 function hideSubMenu(li){ var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "none"; } </script> </head> <body> <ul id="navigation"> <li><a href="#">首頁</a></li> <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">我們的服務</a> <ul> <li><a href="#">服務一</a></li> <li><a href="#">服務二</a></li> <li><a href="#">服務三</a></li> <li><a href="#">服務四</a></li> <li><a href="#">服務五</a></li> </ul> </li> <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">我們的團隊</a> <ul> <li><a href="#">服務一</a></li> <li><a href="#">服務二</a></li> <li><a href="#">服務三</a></li> <li><a href="#">服務四</a></li> <li><a href="#">服務五</a></li> </ul> </li> <li><a href="#">我們的方向</a></li> <li><a href="#">關於我們</a></li> </ul> </body> </html>
nav-css.css文件
1 @charset "UTF-8"; 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 14 body{ 15 font-size: 14px; 16 font-family: sans-serif; 17 } 18 #navigation,#navigation li ul{ 19 list-style-type: none; 20 } 21 #navigation li{ 22 float: left; 23 text-align: center; 24 position: relative; 25 } 26 #navigation li a:link,#navigation li a:visited{ 27 display: block; 28 text-decoration: none; 29 color: #000; 30 width: 120px; 31 height: 40px; 32 line-height: 40px; 33 border: 1px solid #fff; 34 background: #c5dbf2; 35 border-width: 1px 1px 0 0; 36 } 37 #navigation li a:hover{ 38 color: #fff; 39 background: #2687eb; 40 } 41 #navigation li ul li{ 42 float: none; 43 } 44 #navigation li ul{ 45 display: none; 46 position: absolute; /*二級ul使用絕對定位，寬度大於一級菜單時，才不會撐大一級*/ 47 48 } 49 #navigation li ul li a:link,#navigation li ul li a:visited{ 50 display: block; 51 width: 160px; 52 }
在46行，如果一級li的寬度小於二級li的寬度，那么就會撐大一級li的寬度，如圖：
顯示和隱藏二級UL的JS函數：
//顯示子菜單 function showSubMenu(li){ var subMenu = li.getElementsByTagName("ul")[0]; /*傳了一個參數li進來，表示當前鼠標經過的li，
再通過查找當前li下面的第一個ul，注意數組從0開始*/ subMenu.style.display = "block"; } //隱藏子菜單 function hideSubMenu(li){ var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "none"; }
做到了兼容所有的主流瀏覽器。
二、純CSS實現的下拉菜單
純CSS寫的下拉菜單，其他瀏覽器都可以兼容，唯獨IE6這家伙不怎么聽話不兼容，所以當時IE6時，采用table布局，來達到IE6兼容的目的。
HTML文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>純css下拉菜單，兼容IE6</title> <link rel="stylesheet" type="text/css" href="nav-css3.css"> <!--[if lte IE 6]> <style tpye="text/css"> table{ border-collapse: collapse; margin: 0; padding: 0; } .menu ul li a.hide,.menu ul li a:visited.hide{ display: none; } .menu ul li a:hover{ color:#fff; background: #b3ab79; } .menu ul li a:hover ul{ display: block; position: absolute; top: 32px; left: 0; width: 105px; } .menu ul li a:hover ul li a{ background: #faeec7; color: #000; width:160px; } .menu ul li a:hover ul li a:hover{ background: #dfc184; color: #000; } </style> <![endif]--> </head> <body> <div class="menu"> <ul> <li><a class="hide" href="#">我們的服務</a> <!--[if lte IE 6]> <a href="#">我們的服務 <table><tr><td> <![endif]--> <ul> <li><a href="#">服務一</a></li> <li><a href="#">服務一</a></li> <li><a href="#">服務一</a></li> <li><a href="#">服務一</a></li> <li><a href="#">服務一</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="#">我們的服務</a> <!--[if lte IE 6]> <a href="#">我們的服務 <table><tr><td> <![endif]--> <ul> <li><a href="#">服務一</a></li> <li><a href="#">服務一</a></li> <li><a href="#">服務一</a></li> <li><a href="#">服務一</a></li> <li><a href="#">服務一</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="#">我們的服務</a> <!--[if lte IE 6]> <a href="#">我們的服務 <table><tr><td> <![endif]--> <ul> <li><a href="#">服務一</a></li> <li><a href="#">服務一</a></li> <li><a href="#">服務一</a></li> <li><a href="#">服務一</a></li> <li><a href="#">服務一</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> </div> </body> </html>
CSS文件
*{ margin: 0; padding: 0; } .menu{ font-family: arial,sans-serif; font-size: 14px; width: 750px; } .menu ul{ padding: 0; margin: 0; list-style-type: none; } .menu ul li{ float: left; position: relative; } .menu ul li a, .menu ul li a:visited{ display: block; text-align: center; text-decoration: none; width: 104px; height: 30px; color: #000; border: 1px solid #fff; border-width: 1px 1px 0 0; background: #c9c9a7; line-height: 30px; font-size: 11px; } /*隱藏二級菜單ul*/ .menu ul li ul{ display: none; }/*隱藏結束*/ .menu ul li:hover a{ /*????????????嘗試修改此處*/ color: #fff; background: #b3ab79; } /*顯示二級菜單*/ .menu ul li:hover ul{ display: block; position: absolute; top: 31px; left: 0px; width: 105px; }/*結束*/ /*添加二級菜單鼠標移過的樣式*/ .menu ul li:hover ul li a{ display: block; background: #faeec7; color: #000; width: 160px; } .menu ul li:hover ul li a:hover{ background: #dfc184; color: #000; }
ok，這樣IE6也達到兼容。