So implementieren Sie ein vertikales Menü über CSS3 + HTML5-CSS-Tutorial-php.cn

So implementieren Sie ein vertikales Menü über CSS3 + HTML5

jacklove

Freigeben： 2018-06-11 17:16:03

Original

2117 Leute haben es durchsucht

emmm...Es ist hässlich...

<!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>

Nach dem Login kopieren

Dieser Artikel erklärt, wie das vertikale Menü funktioniert Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Erklärungen zur PHP-Captcha-Verifizierungscode-Klasse

MySQL information_schema-bezogener Inhalt

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein vertikales Menü über CSS3 + HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!