下拉及多級(jí)彈出菜單-Web標(biāo)準(zhǔn)(div+css)教程

　　今天我們開始學(xué)習(xí)《十天學(xué)會(huì)web標(biāo)準(zhǔn)(div+css)》的下拉及多級(jí)彈出菜單，包含以下內(nèi)容和知識(shí)點(diǎn)：

　　一、帶下拉子菜單的導(dǎo)航菜單

　　二、絕對(duì)定位和浮動(dòng)的區(qū)別和運(yùn)用

　　三、css自適應(yīng)寬度滑動(dòng)門菜單

　　一、帶下拉子菜單的導(dǎo)航菜單

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

　　先在html代碼增加二級(jí)菜單的代碼：

　　<div id="menu">

　　<ul>

　　<li><a id="current" href="#">首頁(yè)</a></li>

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

　　<ul>

　　<li><a href="#">自適應(yīng)寬度</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實(shí)例</a></li>

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

　　</ul>

　　</div>

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

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

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

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

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

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

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

　　再預(yù)覽一下，是不是基本的樣式已實(shí)現(xiàn)了。