css实现翻转菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 600px;
            height: 50px;
            margin: 100px auto;
            background-color: yellow;
        }
        .content{
            width: 600px;
            height: 250px;
            margin: -100px auto;
            background-color: red;
        }
        .nav .first>li{
            width: 200px;
            height: 50px;
            list-style: none;
            line-height: 50px;
            float: left;
            text-align: center;
        }
        .second li{
            list-style: none;
            background-color: pink;
            transform: rotateY(-90deg);
            transition-duration: 2s;
            opacity: 0;
            position: relative;
        }
        .first>li:hover .second li{
            transform: none;
            opacity: 1;
        }
        .second li:nth-child(1){
            transition-delay: 0ms;
        }
        .second li:nth-child(2){
            transition-delay: 200ms;
        }
        .second li:nth-child(3){
            transition-delay: 400ms;
        }
        .second li:nth-child(4){
            transition-delay: 600ms;
        }
        .second li:nth-child(5){
            transition-delay: 800ms;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul class="first">
            <li>一级菜单
                <ul class="second">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li>二级菜单
                <ul class="second">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li>三级菜单
                <ul class="second">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="content">这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字</div>
</body>
</html>

css实现翻转菜单

上一篇:`webpack-dev-server --inline --progress --config build/webpack.dev.conf.js(vue报错)


下一篇:flutter dio 模块https证书异常,忽略证书错误