CSS的下拉菜單

2024-09-05 12:20:39

字體：大中小

來源：轉載

供稿：網友

CSS的下拉菜單，超簡單的那種，不過從實現代碼看上去貌似還挺復雜，有需要的請復制。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS的下拉菜單</title><style type="text/css">*{margin:0;padding:0;}.menu{font-size:12px;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 #000;background:#8192A6;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}.menu a:hover{background: #0FF;color:#f00;border:1px solid #00F;}.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:13px;margin:0;border:0;border-bottom:1px solid red;}.menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #00F;}</style></head><body><div   id="iwvjtn8m0"   class="menu">    <ul>        <li>menu1                                    <ul>                <li>submenu1</li>                <li>submenu2</li>                <li>submenu3</li>                <li>submenu4</li>            </ul>                    </li>        <li>menu2                                    <ul>                <li>submenu1</li>                <li>submenu2</li>            </ul>                    </li>        <li>menu3                                    <ul>                <li>submenu1</li>                <li>submenu2</li>            </ul>                    </li>        <li>menu4</li>        <li>menu5</li>    </ul></div></body></html>

上一篇：CSS豎向Tab代碼

下一篇：仿騰訊QQ豎直滑動導航菜單