第八章：下拉及多級彈出菜單

　　今天我們開始學習《十天學會web標準(div+css)》的下拉及多級彈出菜單，包含以下內(nèi)容和知識點：

　　一、帶下拉子菜單的導航菜單

　　二、絕對定位和浮動的區(qū)別和運用

　　三、css自適應寬度滑動門菜單

　　一、帶下拉子菜單的導航菜單

　　下拉菜單在一些企業(yè)網(wǎng)站應用尤為廣泛，它存在使用方便，占用空間小等特點。之前縱向?qū)Ш浇坛讨幸咽褂眠^二級導航，今天制作下橫向?qū)Ш讲藛蔚亩壊藛?，方法和縱向一樣，只不過由縱向改變?yōu)闄M向而已，下面我們以上一章第二節(jié)用圖片美化的橫向?qū)Ш街械膶嵗M行修改。

　　先在html代碼增加二級菜單的代碼：

　　<div id="menu">

　　<ul>

　　<li><a id="current" href="#">首頁</a></li>

　　<li><a href="#">網(wǎng)頁版式</a>

　　<ul>

　　<li><a href="#">自適應寬度</a></li>

　　<li><a href="#">固定寬度</a></li>

　　</ul>

　　</li>

　　<li><a href="#">web教程</a>

　　<ul>

　　<li><a href="#">新手入門</a></li>

　　<li><a href="#">視頻教程</a></li>

　　<li><a href="#">常見問題</a></li>

　　</ul>

　　</li>

　　<li><a href="#">web實例</a></li>

　　<li><a href="#">常用代碼</a></li>

　　</ul>

　　</div>

　　增加完代碼后，在瀏覽器里預覽一下：

　　是不是一看頭都大了，怎么變成這樣了。別懵，我們分析一下錯亂的原因。首先我們看下“自適應寬度”和“固定寬度”兩個二級菜單也繼承了一級菜單的背景和橫向排列，所以我們先把二級菜單的背景和浮動清除掉，增加以下css代碼：

　　#menu ul li ul li { float:none;}

　　#menu ul li ul li a { background:none;}

　　現(xiàn)在預覽看下，二級菜單是不是已經(jīng)歸位了，但鼠標劃過時還繼承了一級菜單的樣式，所以也改為最終效果上的黑色背景白色文字，還有下拉菜單的灰色邊框和灰色背景也一并加上，修改并增加如下代碼：

　　#menu ul li ul { border:1px solid #ccc;}

　　#menu ul li ul li { float:none; width:85px; background:#eee; margin:0;}

　　#menu ul li ul li a { background:none;}

　　#menu ul li ul li a:hover { background:#333; color:#fff;}