純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   id="iwvjtn8m0"   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仿真的下拉列表菜單