網(wǎng)頁二級菜單制作的方式可以采用兩種方式來實現(xiàn)瓤逼，第一種使用純CSS控制酥泞，第二種使用JavaScript+CSS给猾。下面分別用兩種方式來實現(xiàn)二級菜單。
不管采用哪種方式來實現(xiàn)先朦，基本的html元素是不變的缰冤。基本的html元素如下：
<div id="menu">
??? <ul>
??????? <li><a href="#">首頁</a></li>
??????? <li><a href="#">首頁</a>
??????????? <ul>
??????????????? <li><a href="#">二級菜單</a></li>
???????????????? <li><a href="#">二級菜單</a></li>
??????????? </ul>
??????? </li>
??????? <li><a href="#">首頁</a>
??????????? <ul>
??????????????? <li><a href="#">二級菜單</a></li>
???????????????? <li><a href="#">二級菜單</a></li>
??????????? </ul>
??????? </li>
??????? <li><a href="#">首頁</a></li>
??????? <li><a href="#">首頁</a></li>
??????? <li><a href="#">首頁</a></li>
??? </ul>
</div>
一喳魏、CSS實現(xiàn)二級菜單
使用一下的樣式就可以實現(xiàn)二級菜單的顯示：
????? *{ margin:0px;padding:0px;}
???? #menu{ background-color :#eee; width:600px; margin:0 auto; height:40px; }
???? ul{ list-style:none;}
???? ul li{ float:left ; line-height:40px; text-align:center; position :relative; }
???? a{ text-decoration:none;color:#000;display:block ;width:90px;}
???? a:hover{color:#fff; background-color:#666;}
???? ul li ul li{float:none;border-left:none; background-color:#eee;margin-top:2px; }
???? ul li ul{ display:none; position:absolute; width:90px;}
???? ul li ul li a:hover{ background-color:#06f;}
???? ul li:hover ul{ display:block;}
其中注意的地方有：
1棉浸、*號代表所以有的元素；
2刺彩、line-height屬性迷郑，可以設(shè)置文字垂直居中。原理：因為line-height代表的字的行高创倔，如果父元素的高度為50px且padding值為0嗡害，字體設(shè)置為20px,line-height設(shè)置為30px,那么該文字在父容器中是居中，上面下面都有15px的留白,所以只要設(shè)置行高和父容器的行高一樣那么文字就是垂直居中畦攘。當(dāng)父容器太大的時候只需要包含文字的容器在中間顯示霸妹，可以對包含文字的容器進行設(shè)置margin-top屬性或者對父容器設(shè)置padding-top屬性。
3知押、hover選擇器與：之間不能有空格，養(yǎng)成良好的習(xí)慣台盯，如果有空格罢绽，可能不會顯示正確樣式效果。
4静盅、相對定位與絕對定位：
<div id="one">
??? one
??????? <div id="two">
??????? two
??????????? <div id="three">
??????????????? three
??????????? </div>
??????? </div>
??? </div>
css的控制代碼如下：
? ? div{? margin-left:0px;}
??? #one{ height:500px; border:1px solid red; width:500px; position:relative}
??? #two{ height:300px; border:1px solid blue; width:300px; margin :0px; position :relative }
???? #three{ height:100px; border:1px solid black ; width:100px;position :absolute;top:50px left:20px }
其中#three設(shè)置的是絕對定位良价，那么當(dāng)他的上級容器沒有設(shè)置為相對定位的時候，那么#three就是相對瀏覽器的左上角定位温亲，否則#three就相對于上級容器定位棚壁。在該實例中，#three是相對于#two進行絕對定位的栈虚，如果#two沒有進行相對定位袖外，那么#three就是相對于#one進行絕對定位。如果#three的上級元素都有相對定位的話魂务，那么就相對于距離其最近的上級元素進行絕對定位曼验。在我的感覺中相對定位是配合絕對定位使用泌射，其中絕對定位的元素不屬于文檔流中的一部分。
在進行絕對定位的時候用top鬓照、left熔酷、right、bottom來指定相對上級元素的位置豺裆，但是如果不設(shè)置top拒秘、left、right臭猜、bottom元素躺酒，而是設(shè)置margin又會是不一樣的效果。將#three的中的top和left屬性去掉蔑歌，加上margin-top和margin-left會使得#three相對自己本身的位置進行左上偏離羹应，至于本來的位置在哪里，可以根據(jù)在可視化工具中去查看次屠。
二园匹、JavaScript+CSS實現(xiàn)二級菜單
使用下列的樣式和JavaScript腳本：
? <style type="text/css">
???? *{ margin:0px;padding:0px;}
???? #menu{ background-color :#eee; width:600px; height:40px; margin:0 auto;}
???? ul{ list-style:none;}
???? ul li{ float:left ; line-height:40px; text-align:center; position :relative; }
???? a{ text-decoration:none;color:#000;display:block ;width:90px;}
???? a:hover{color:#fff; background-color:#666;}
???? ul li ul li{float:none;border-left:none; background-color:#eee;margin-top:2px; }
???? ul li ul{ display:none; position:absolute; width:90px;}
??? </style>
??? <script type="text/javascript">
??????? function show(li) {
??????????? var submenu = li.getElementsByTagName("ul")[0];
??????????? submenu.style.display = "block";
??????? }
??????? function hide(li) {
??????????? var submenu = li.getElementsByTagName("ul")[0];
??????????? submenu.style.display = "none";
??????? }
??? </script>
其中注意的地方有：
1、document.getElementsByTagName("tagname")函數(shù)返回的是在document文檔中返回tagname標(biāo)簽數(shù)組劫灶。當(dāng)然每個對象都可以使用getElementsByTagName的方法裸违，不同的對象使用該方法只能從該對象的下級元素中去搜索tagname標(biāo)簽。
二浑此、CSS三級菜單的實現(xiàn)
三級菜單的實現(xiàn)和二級菜單是一樣的原理累颂，其核心是利用三級菜單相對于二級的絕對定位。其中定位屬性有繼承的效果凛俱。
一切情緒皆痛苦紊馏，沒有什么情緒是快樂的。
