如何透過css3+html5實現縱向選單-css教學-PHP中文網

如何透過css3+html5實現縱向選單

jacklove

發布： 2018-06-11 17:16:03

原創

2081 人瀏覽過

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>
<p class="wrap">
    <p 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>
    </p>
    <p 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>
    </p>
    <p 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>
    </p>
    <p 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>
    </p>
</p>
</body>
</html>

登入後複製

本文讲解了关于如何通过css3 html5实现纵向菜单，更多相关内容请关注php中文网。