CSS3+html5를 통해 세로 메뉴를 구현하는 방법-CSS 튜토리얼-php.cn

CSS3+html5를 통해 세로 메뉴를 구현하는 방법

jacklove

풀어 주다： 2018-06-11 17:16:03

원래의

2125명이 탐색했습니다.

으음... 좀 보기 흉하네요...

<!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 중국어 홈페이지를 참고해주세요.