纯CSS下拉式导航菜单

2024-09-05 12:19:17

字体：大中小

来源：转载

供稿：网友

纯CSS下拉式导航菜单，支持IE6、IE7、Firefox，没有用到任何JavaScript，修改方便，而且效果也不错。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>纯CSS的下拉菜单，支持IE6 IE7 Firefox</title>  <style type="text/css">  *{margin:0;padding:0;}   .menu{font-size:9pt;position:relative;z-index:100;}   .menu ul{list-style:none;}   .menu li {float:left;position:relative;}   .menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}   .menu table {position:absolute; top:0; left:0;}   .menu ul li:hover ul,   .menu ul a:hover ul{visibility:visible;}   .menu a{display:block;border:1px solid #555;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}   .menu a:hover{background:#666;color:#fff;border:1px solid #000;}   .menu ul ul{}   .menu ul ul li {clear:both;text-align:left;font-size:12px;}   .menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;}   .menu ul ul li a:hover{border:0;background:#666;border-bottom:1px solid #fff;}   </style>  </head>  <body>  <div class="menu">            <ul>                <li>CSS教程                                                <ul>                        <li>WEV标准</li>                        <li>技术文章</li>                        <li>布局实例</li>                        <li>教程专题</li>                  </ul>                                    </li>                <li>艺术欣赏                                                <ul>                        <li>经典外站</li>                        <li>配色研究</li>                    </ul>                                    </li>                <li>Javascript                                                             <ul>                        <li>JSON</li>                        <li>EXTJS</li>                    </ul>                                    </li>                <li>DOM</li>                <li>XML</li>                <li>正则表达式                                                             <ul>                        <li>正则简介</li>                        <li>正则之道</li>                    </ul>                                    </li>                <li>网站优化</li>                <li>电脑网络</li>                <li>建站技术                                                             <ul>                        <li>PHP</li>                        <li>JSP</li>                    </ul>                                    </li>            </ul>  </div>  </body>  </html>

上一篇：仿淘宝阴影效果的滑动门选项卡

下一篇：JS+CSS仿真的下拉列表菜单

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注