类似于百度的下拉菜单

来源：互联网发布：淘宝退的运费险在哪里编辑：程序博客网时间：2024/05/22 09:21

鼠标hover之后弹出下拉的，代码如下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        ul{            list-style: none;        }        .nav>li{            float: left;        }        ul a{            display: block;            text-decoration: none;            width: 100px;            height: 50px;            text-align: center;            line-height: 50px;            color: white;            background-color: #2f3e45;        }        .drop-down-content{            padding: 0;            display: none;            /*position: absolute;*/        }                h3{            font-size: 30px;            clear: both;        }        .drop-down-content li:hover a{            background-color:red;        }        .nav .drop-down:hover .drop-down-content{            display: block;        }</style></head><body>    <ul class="nav">        <li class="drop-down"><a href="#">用户名</a>            <ul class="drop-down-content">                <li><a href="#">个人中心</a></li>                <li><a href="#">退出</a></li>            </ul>          </li>    </ul>    <h3>我是测试文字</h3></body></html>

参考资料

[1]用纯css实现下拉菜单

阅读全文

0 0