多級下拉菜單在一些企業(yè)網(wǎng)站應(yīng)用非常廣泛，它存在使用方便、占用空間小等特點(diǎn)。本節(jié)將介紹橫網(wǎng)頁設(shè)計(jì)中向?qū)Ш讲藛蔚亩壊藛蔚闹谱鞣椒ǎ瑥亩M(jìn)一步說明列表在制作導(dǎo)航菜單上的應(yīng)用。
【操作步驟】
第1步，啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁，保存為index.html。
第2步，構(gòu)建網(wǎng)頁的基本結(jié)構(gòu)。本例中由兩層嵌套的<ul>標(biāo)簽定義了二級菜單。
<div class="menu">
<ul>
<li><a href="#">文 件</a>
<ul>
<li><a href="#">打 開</a></li>
<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="#">標(biāo) 尺</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>
<ul>
<li><a href="#">歷史記錄</a></li>
<li><a href="#">顏 色</a></li>
<li><a href="#">時(shí)間軸</a></li>
</ul>
</li>
</ul>
<div class="clear"> </div>
</div>
第3步，在<head>標(biāo)簽內(nèi)添加<styletype="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后輸入下面樣式，定義網(wǎng)頁的menu容器樣式，并定義一級菜單中列表樣式。
.menu {/*menu樣式類*/
font-family:"黑體"; /*定義整個(gè)menu容器中的字體為黑體*/
width:440px; /*menu容器寬度*/
margin:0; /*定義四周補(bǔ)白為0*/}
.menu ul {/*定義一級菜單中列表樣式*/
padding:0; /*一級菜單中列表的內(nèi)邊距為0*/
list-style-type: none; /*不顯示項(xiàng)目符號*/}
.menu ul li { float:left; /*使菜單項(xiàng)橫向顯示*/
position:relative; /*定義一級菜單中列表的定位方式為相對定位*/}
在以上代碼中，定義了一級菜單的樣式，其中<li>標(biāo)簽中，通過float:left語句使原來豎向顯示的列表項(xiàng)橫向顯示，并用position:relative語句設(shè)置其position屬性為相對定位。
第4步，設(shè)置一級菜單中的<a>標(biāo)簽的樣式和<a>標(biāo)簽在已訪問過時(shí)和鼠標(biāo)懸停時(shí)的樣式。
.menu ul li a,
.menu ul li a:visited { /*定義一級菜單中a對象樣式及a對象在已訪問過時(shí)的樣式*/
display:block; /*定義為塊級元素*/ text-align:center; /*居中對齊*/
text-decoration:none; /*不顯示下劃線*/
width:104px; /*定義菜單的寬度*/
height:30px; /*高寬*/
color:#fff; /*字體顏色*/ border:1px solid #666; /*定義邊框*/
background: #252525; /*背景顏色*/
line-height:30px; /*行間距*/
font-size:14px; /*字體大小*/}
.menu ul li:hover a {/*鼠標(biāo)懸停時(shí)<a>標(biāo)簽樣式*/
color:#fff; /*鼠標(biāo)懸停時(shí)改變字體顏色為#fff*/}
在以上代碼中，首先定義了a為塊級元素，border: 1px solid #fff語句雖然定義了網(wǎng)站建設(shè)中菜單項(xiàng)的邊框樣式，但是由于border-width:1px 1px 0 0的作用，所以在這里只顯示上邊框和右邊框，下邊框和左邊框由于寬度為0，所以不顯示任何效果。在這里值得注意的是，既定義了height:30px，又定義了line-height: 30px，兩者的區(qū)別在于height定義的是整個(gè)a塊的高度，而line-height定義的是文字的行高，在這里，line-height還有一個(gè)作用就是一行30個(gè)像素，文字會(huì)相對于這30個(gè)像素垂直居中顯示。
第5步，設(shè)置二級菜單樣式。
.menu ul li ul {/*二級菜單中ul樣式*/ display: none; /*將二級菜單設(shè)置為不顯示*/}
.menu ul li:hover ul {/*鼠標(biāo)劃過一級菜單的ul時(shí)，二級菜單才顯示*/
display:block; /*定義為塊級元素 */ position:absolute; /*絕對定位*/
top:31px; /*相對其父標(biāo)簽的位置*/
left:0px; /*相對其父標(biāo)簽的位置*/
width:105px; /*寬度*/}
在以上代碼中，首先定義了二級菜單的<ul>標(biāo)簽樣式，display:none語句的作用是將其所有內(nèi)容隱藏，并且使其不再占用文檔中的空間；然后定義了一級菜單中<li>標(biāo)簽的偽類，當(dāng)鼠標(biāo)經(jīng)過一級菜單時(shí)，二級菜單開始顯示，這就實(shí)現(xiàn)了我們想要的效果，目前IE6只支持a的偽類，其他標(biāo)簽的偽類不支持。在menu ul li:hover ul中設(shè)置了posi-tion:absolute屬性，也就是絕對定位，它將脫離原來文檔流，以其父標(biāo)簽的原點(diǎn)為原點(diǎn)定位，其定位為top:31px;left:0px，為什么是31px呢，因?yàn)槠涓讣墭?biāo)簽的height屬性為30px，所以，在設(shè)計(jì)網(wǎng)頁時(shí)，如果想要在一級菜單下顯示，就應(yīng)該是31px的位置；width:105px，是由于一級菜單的width是104px，加上右邊框的1px，正好是105px。
第6步，設(shè)置二級菜單的鏈接樣式和鼠標(biāo)懸停時(shí)的效果。
.menu ul li:hover ul li a {/*二級菜單鏈接樣式*/ display:block;
background:#ff4321; /*二級菜單背景色*/ color:#000; /*二級菜單字體顏色*/}
.menu ul li:hover ul li a:hover {/*二級菜單的鼠標(biāo)懸停樣式*/
background:#dfc184; /*二級菜單的鼠標(biāo)懸停時(shí)背景色*/
color:#000; /*二級菜單的鼠標(biāo)懸停時(shí)的字體顏色*/}
在以上代碼中，設(shè)置了二級菜單的背景色、字體顏色和鼠標(biāo)懸停時(shí)的背景色、字體顏色。