主頁 > 知識庫 > CSS網(wǎng)頁布局入門教程14：縱向下拉及多級彈出式菜單

CSS網(wǎng)頁布局入門教程14：縱向下拉及多級彈出式菜單

學(xué)完了上節(jié)教程，我想對于這于這節(jié)的學(xué)習(xí)就容易得多了。
橫向菜單是通過div及JavaSprict實(shí)現(xiàn)下拉控制，縱向菜單呢？答案是肯定的。我們現(xiàn)在要做的就是一個(gè)縱向菜單，css代碼：

ul { margin:0; padding:0; list-style:none; width:120px; border-bottom:1px solid #ccc; font-size:12px;}
ul li { position:relative;}
li ul { position:absolute; left:119px; top:0; display:none;}
ul li a { width:108px; display:block; text-decoration:none; color:#666666; background:#fff; padding:5px; border:1px solid #ccc; border-bottom:0px;}
ul li a:hover { background-color:#ddd;}
/*解決ul在IE下顯示不正確的問題*/
* html ul li { float:left; height:1%;}
* html ul li a { height:1%;}
/* end */
li:hover ul,li.over ul { display:block;}

css代碼的編寫基本上保持了與橫向?qū)Ш较嗤乃悸?，不同的是，為了?shí)現(xiàn)導(dǎo)航中的了導(dǎo)航與主導(dǎo)航在實(shí)現(xiàn)鼠標(biāo)交互的同時(shí)，保持其相對位置一致，我們使用了對ul li{}使用了position:relative;使其定位方式轉(zhuǎn)為相對定位。而對li ul{}即子導(dǎo)航采用了position:absolute;相對于導(dǎo)航的絕對定位方式，了其鼠標(biāo)交互后的位置一致。
也許您已經(jīng)發(fā)現(xiàn)，這里在css代碼未尾增加了一段注釋的定義* html ul li 與* html ul li a。這里用到的是CSS hack，這是因?yàn)椴煌臑g覽器對代碼的解析不同，用來實(shí)現(xiàn)在各瀏覽器上顯示相同的效果而使用的。這段代碼只有IE瀏覽器能解析，其它瀏覽器視而不見。
本例的最終顯示效果如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉縱向及多級彈出式菜單www.aa25.cn</title>  <style> ul { margin:0; padding:0; list-style:none; width:120px; border-bottom:1px solid #ccc; font-size:12px;} ul li { position:relative;} li ul { position:absolute; left:119px; top:0; display:none;} ul li a { width:108px; display:block; text-decoration:none; color:#666666; background:#fff; padding:5px; border:1px solid #ccc; border-bottom:0px;} ul li a:hover { background-color:#ddd;} /*解決ul在IE下顯示不正確的問題aa25.cn*/ * html ul li { float:left; height:1%;} * html ul li a { height:1%;} /* end */ li:hover ul,li.over ul { display:block;} </style> </head> <body> <ul id="nav">     <li>文章         <ul>             <li>CSS教程</li>             <li>DOM教程</li>             <li>XML教程</li>             <li>FLASH教程</li>         </ul>     </li>     <li>參考         <ul>             <li>XHTML</li>             <li>XML</li>             <li>CSS</li>         </ul>     </li>     <li>BLOG         <ul>             <li>全部</li>             <li>網(wǎng)頁技術(shù)</li>             <li>UI技術(shù)</li>             <li>FLASH技術(shù)</li>         </ul>     </li>     <li>搖滾</li>     <li>純音樂</li>     <li>古典金曲</li>     <li>電影原聲</li> </ul> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

標(biāo)簽：河南滄州長治上海紅河沈陽樂山新疆

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《CSS網(wǎng)頁布局入門教程14：縱向下拉及多級彈出式菜單》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

佳木斯湛栽影视文化发展公司

CSS網(wǎng)頁布局入門教程14：縱向下拉及多級彈出式菜單

QQ咨詢

電話咨詢