純CSS兩級下拉菜單

2024-09-05 12:20:37

字體：大中小

來源：轉載

供稿：網友

純CSS兩級下拉菜單，見得多了吧？本款完全是用CSS實現，沒有任何的JavaScript代碼，兼容性方面在IE8下沒問題，IE6/IE7尚未測試。

<!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> <title>純CSS下拉菜單_vevb.com</title> <style type="text/css"> .navigation {     margin:0;     padding:0;     width:610px;     list-style-type:none;     font:12px Arial;     float:left;    } .navigation li {     float:left;     padding:0;     margin:0 10px 0 0;     _margin:0 2px 0 0;     width:150px;     } /* 選單區塊*/ .navigation li dl {     width:150px;/*ie6*/     margin:0;     padding:0;     background-color:#fff;     border:solid 2px #666;     } .navigation li dt a , .navigation li dd a{ display:block;} /* 主選單dt */ .navigation li dt {     margin:0;     padding: 5px;     text-align:center;     background-color:#fff;     font-size: 12px;     font-weight: bold;     height:15px;     overflow:hidden;     } .navigation li dt a ,.navigation  li dt a:visited {     display:block;     color:#333;     text-decoration:none;     } /* 子選單dd */ .navigation li dd {     margin:0;     padding:0;     color: #333;     background-color:#efefef;     border-bottom:dotted 1px #666;     } .navigation li dd.last {     border-bottom:0;     } .navigation li dd a, .navigation  li dd a:visited {     display:block;     color:#333;     text-decoration:none;     padding:4px 5px 4px 20px;     } /*隱藏子選單*/ .navigation li dd { display:none;} /* 滑鼠滑入顯示子選單 */ .navigation li:hover dd, .navigation li a:hover dd { display:block;} /*ie6 hack*/ .navigation li:hover,.navigation li a:hover { border:0;} .navigation table { border-collapse:collapse;     padding:0;     text-align:left;     } </style> </head> <body> <ul class="navigation">     <li>              <dl>             <dt>源碼資源</dt>             <dd>網站首頁</dd>             <dd>最新更新</dd>             <dd class="last">最新排行</dd>         </dl>          </li>     <li>              <dl>             <dt>Photoshop</dt>             <dd>Macromedia</dd>             <dd class="last">Microsoft</dd>         </dl>      </li>            <li>               <dl>             <dt>jQuery</dt>             <dd>Prototype</dd>             <dd class="last">輔助工具</dd>         </dl>              </li> </ul></body> </html>

上一篇：經典選項卡代碼,淡入淡出,jquery插件版

下一篇：JS+CSS類似QQ好友/黑名單的樹型菜單

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注