纯CSS下拉菜单，Aspku.com整理

2024-09-05 12:20:32

字体：大中小

来源：转载

供稿：网友

纯CSS下拉菜单，绝对没有用Javascript，虽然简单，但是美观大方，先运行一下看看效果吧，本菜单扩展性很好，你完全可以在此基础上继续完善功能，以满足您的使用要求。

<!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=utf-8" /> <title>纯CSS下拉菜单</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;} .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;     } .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>最新更新</dd>             <dd class="last">脚本资源</dd>         </dl>          </li>     <li>              <dl>             <dt>Photoshop</dt>             <dd>AJAX资源</dd>             <dd class="last">网页范例</dd>         </dl>      </li>            <li>               <dl>             <dt>css</dt>             <dd>实用案例</dd>             <dd class="last">辅助工具</dd>         </dl>              </li> </ul></body> </html>

上一篇：jQuery1.3.2竖向的伸缩菜单

下一篇：经典的蓝色CSS下拉菜单

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注