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