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 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竖直滑动导航菜单

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注