css3+html5——纵向菜单

最新推荐文章于 2024-08-05 22:52:29 发布

十二Tel

最新推荐文章于 2024-08-05 22:52:29 发布

阅读量3.3k

点赞数

本文链接：https://blog.csdn.net/weixin_42426348/article/details/80639562

版权

emmm...做的比较丑...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>横向菜单</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .wrap{
            width: 600px;
            margin: 0 auto;
        }
        a{
            text-decoration: none;
        }
        .menu{
            width: 90px;
            background: greenyellow;
            margin: 5px auto;
            position: relative;
            text-align: center;
            transition-duration: 0.5s;/*颜色转变时间*/
            /*float: left;*/
        }
        .menu:hover{
            background: pink;
            transition-duration: 0.5s;
        }
        .menu ul{
            width: 90px;
            display: none;
            background: aqua;
            position: absolute;
            top:0px;
            left:90px;
            border: 1px solid cornflowerblue;
        }
        .menu ul li{
            list-style-type: none;
        }
        .menu ul li a {
            display: block;
            padding: 5px 10px;
            border-bottom: 1px solid transparent;
        }
        .menu ul li a:hover{
            background: yellow;
            border-bottom: 1px solid cornflowerblue;
        }
        .menu:hover .select_app{
            display: block;
            transition-duration: 0.5s;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="menu">
        <a href="#" class="app">应用</a>
        <ul class="select_app">
            <li><a href="#">聊天应用</a></li>
            <li><a href="#">游戏应用</a></li>
            <li><a href="#">天气应用</a></li>
            <li><a href="#">其他应用</a></li>
            <li><a href="#">聊天应用</a></li>

        </ul>
    </div>
    <div class="menu">
        <a href="#" class="app">应用</a>
        <ul class="select_app">
            <li><a href="#">聊天应用</a></li>
            <li><a href="#">游戏应用</a></li>
            <li><a href="#">天气应用</a></li>
            <li><a href="#">其他应用</a></li>
            <li><a href="#">聊天应用</a></li>

        </ul>
    </div>
    <div class="menu">
        <a href="#" class="app">应用</a>
        <ul class="select_app">
            <li><a href="#">聊天应用</a></li>
            <li><a href="#">游戏应用</a></li>
            <li><a href="#">天气应用</a></li>
            <li><a href="#">其他应用</a></li>
            <li><a href="#">聊天应用</a></li>

        </ul>
    </div>
    <div class="menu">
        <a href="#" class="app">应用</a>
        <ul class="select_app">
            <li><a href="#">聊天应用</a></li>
            <li><a href="#">游戏应用</a></li>
            <li><a href="#">天气应用</a></li>
            <li><a href="#">其他应用</a></li>
            <li><a href="#">聊天应用</a></li>

        </ul>
    </div>
</div>
</body>
</html>