網(wǎng)頁(yè)二級(jí)菜單制作的方式可以采用兩種方式來(lái)實(shí)現(xiàn)，第一種使用純CSS控制，第二種使用JavaScript+CSS。下面分別用兩種方式來(lái)實(shí)現(xiàn)二級(jí)菜單。

不管采用哪種方式來(lái)實(shí)現(xiàn)，基本的html元素是不變的。基本的html元素如下：

<div id="menu">
??? <ul>
??????? <li><a href="#">首頁(yè)</a></li>
??????? <li><a href="#">首頁(yè)</a>
??????????? <ul>
??????????????? <li><a href="#">二級(jí)菜單</a></li>
???????????????? <li><a href="#">二級(jí)菜單</a></li>
??????????? </ul>
??????? </li>
??????? <li><a href="#">首頁(yè)</a>
??????????? <ul>
??????????????? <li><a href="#">二級(jí)菜單</a></li>
???????????????? <li><a href="#">二級(jí)菜單</a></li>
??????????? </ul>
??????? </li>
??????? <li><a href="#">首頁(yè)</a></li>
??????? <li><a href="#">首頁(yè)</a></li>
??????? <li><a href="#">首頁(yè)</a></li>
??? </ul>
</div>

一、CSS實(shí)現(xiàn)二級(jí)菜單

使用一下的樣式就可以實(shí)現(xiàn)二級(jí)菜單的顯示：

????? *{ 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、*號(hào)代表所以有的元素；

2、line-height屬性，可以設(shè)置文字垂直居中。原理：因?yàn)閘ine-height代表的字的行高，如果父元素的高度為50px且padding值為0，字體設(shè)置為20px,line-height設(shè)置為30px,那么該文字在父容器中是居中，上面下面都有15px的留白,所以只要設(shè)置行高和父容器的行高一樣那么文字就是垂直居中。當(dāng)父容器太大的時(shí)候只需要包含文字的容器在中間顯示，可以對(duì)包含文字的容器進(jìn)行設(shè)置margin-top屬性或者對(duì)父容器設(shè)置padding-top屬性。

3、hover選擇器與：之間不能有空格，養(yǎng)成良好的習(xí)慣，如果有空格，可能不會(huì)顯示正確樣式效果。

4、相對(duì)定位與絕對(duì)定位：

<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è)置的是絕對(duì)定位，那么當(dāng)他的上級(jí)容器沒(méi)有設(shè)置為相對(duì)定位的時(shí)候，那么#three就是相對(duì)瀏覽器的左上角定位，否則#three就相對(duì)于上級(jí)容器定位。在該實(shí)例中，#three是相對(duì)于#two進(jìn)行絕對(duì)定位的，如果#two沒(méi)有進(jìn)行相對(duì)定位，那么#three就是相對(duì)于#one進(jìn)行絕對(duì)定位。如果#three的上級(jí)元素都有相對(duì)定位的話，那么就相對(duì)于距離其最近的上級(jí)元素進(jìn)行絕對(duì)定位。在我的感覺(jué)中相對(duì)定位是配合絕對(duì)定位使用，其中絕對(duì)定位的元素不屬于文檔流中的一部分。

在進(jìn)行絕對(duì)定位的時(shí)候用top、left、right、bottom來(lái)指定相對(duì)上級(jí)元素的位置，但是如果不設(shè)置top、left、right、bottom元素，而是設(shè)置margin又會(huì)是不一樣的效果。將#three的中的top和left屬性去掉，加上margin-top和margin-left會(huì)使得#three相對(duì)自己本身的位置進(jìn)行左上偏離，至于本來(lái)的位置在哪里，可以根據(jù)在可視化工具中去查看。

二、JavaScript+CSS實(shí)現(xiàn)二級(jí)菜單

使用下列的樣式和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)然每個(gè)對(duì)象都可以使用getElementsByTagName的方法，不同的對(duì)象使用該方法只能從該對(duì)象的下級(jí)元素中去搜索tagname標(biāo)簽。

二、CSS三級(jí)菜單的實(shí)現(xiàn)

三級(jí)菜單的實(shí)現(xiàn)和二級(jí)菜單是一樣的原理，其核心是利用三級(jí)菜單相對(duì)于二級(jí)的絕對(duì)定位。其中定位屬性有繼承的效果。

一切情緒皆痛苦，沒(méi)有什么情緒是快樂(lè)的。