纯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好友/黑名单的树型菜单

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注