下拉及多級彈出菜單-Web標準(div+css)教程

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

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

　　二、絕對定位和浮動的區別和運用

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

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

　　下拉菜單在一些企業網站應用尤為廣泛，它存在使用方便，占用空間小等特點。之前縱向導航教程中已使用過二級導航，今天制作下橫向導航菜單的二級菜單，方法和縱向一樣，只不過由縱向改變為橫向而已，下面我們以上一章第二節用圖片美化的橫向導航中的實例進行修改。

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

　　<div id="menu">

　　<ul>

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

　　<li><a href="#">網頁版式</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;}

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

　　#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;}

　　第一行設置二級菜單的灰色邊框；為了美觀，我們把下拉菜單的寬度設置成和一級菜單寬度相同，第二行的width:85px再加上第一行上設置的邊框左右各1px后正好是87px，和一級菜單寬度相同。margin:0是為了清除掉繼承一級菜單中margin-left:2px；最后一行設置鼠標劃過時的樣式。

　　再預覽一下，是不是基本的樣式已實現了。