类似于百度的下拉菜单

鼠标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实现下拉菜单

posted @ 2017-09-22 11:03  开往春天的拖拉机  阅读(105)  评论(0)  编辑  收藏  举报