CSS網頁布局入門教程14:縱向下拉及多級彈出式菜單_基礎教程

來源:互聯網
上載者:User
學完了上節教程,我想對於這於這節的學習就容易得多了。
橫向菜單是通過div及JavaSprict實現下拉控制,縱向菜單呢?答案是肯定的。我們現在要做的就是一個縱向菜單,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代碼的編寫基本上保持了與橫嚮導航相同的思路,不同的是,為了實現導航中的了導航與主導航在實現滑鼠互動的同時,保持其相對位置一致,我們使用了對ul li{}使用了position:relative;使其定位方式轉為相對定位。而對li ul{}即子導航採用了position:absolute;相對於導航的絕對位置方式,了其滑鼠互動後的位置一致。
也許您已經發現,這裡在css代碼未尾增加了一段注釋的定義* html ul li 與* html ul li a。這裡用到的是CSS hack,這是因為不同的瀏覽器對代碼的解析不同,用來實現在各瀏覽器上顯示相同的效果而使用的。這段代碼只有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>網頁技術</li> <li>UI技術</li> <li>FLASH技術</li> </ul> </li> <li>搖滾</li> <li>純音樂</li> <li>古典金曲</li> <li>電影原聲</li> </ul> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.