二级翻转菜单

最新推荐文章于 2021-06-25 19:49:31 发布

只字不留

最新推荐文章于 2021-06-25 19:49:31 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/qq15045846160/article/details/88648283

版权

代码中有详细注释

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>翻转菜单</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            /* 一级菜单 */
            .nav{
                width: 400px;
                height: 40px;
                margin: 0px auto;
                margin-top: 100px;
                background-color: green;
            }
            .nav>li{
                list-style: none;
                float: left;
                width: 120px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                background-color: pink;
                margin-left: 10px;
                /* 定位菜单会遮盖没有定位的菜单 */
                position: relative;
            }

            /* 二级菜单 */
            .sub{
                position: absolute;
                width: 120px;
                left: 0;
                top: 40px;
            }
            .sub li{
                list-style: none;
                background-color: yellow;
                /*先将其翻转180度，然后在使其透明度为零来隐藏效果*/
                transform: rotateY(180deg);
                /*all指的是宽和高*/
                transition: all 1s;
                opacity: 0;
            }
            .nav>li:hover .sub>li{
            /* 当鼠标悬停时，使.sub li 的transform属性消失，也就是上面的翻转180度，并且使隐藏的效果出现。*/
                transform: none;
                opacity: 1;
            }

/*使从上到下li依次翻转出现*/
            .nav>li:hover .sub>li:nth-child(1){
                transition-delay: 0ms;
            }
            .nav>li:hover .sub>li:nth-child(2){
                transition-delay: 200ms;
            }
            .nav>li:hover .sub>li:nth-child(3){
                transition-delay: 400ms;
            }
            .nav>li:hover .sub>li:nth-child(4){
                transition-delay: 600ms;
            }
            .nav>li:hover .sub>li:nth-child(5){
                transition-delay: 800ms;
            }


/*使从下到上li依次翻转消失*/
            .nav>li .sub>li:nth-child(5){
                transition-delay: 0ms;
            }
            .nav>li .sub>li:nth-child(4){
                transition-delay: 200ms;
            }
            .nav>li .sub>li:nth-child(3){
                transition-delay: 400ms;
            }
            .nav>li .sub>li:nth-child(2){
                transition-delay: 600ms;
            }
            .nav>li .sub>li:nth-child(1){
                transition-delay: 800ms;
            }

            div{
                width: 400px;
                height: 300px;
                background-color: green;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <ul class="nav">
            <li>一级菜单
                <ul class="sub">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li>一级菜单
                <ul class="sub">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li>一级菜单
                <ul class="sub">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>              
            </li>
        </ul>
        <div>
            <p>咿呀呀呀呀呀</p>
            <p>咿呀呀呀呀呀</p>
            <p>咿呀呀呀呀呀</p>
            <p>咿呀呀呀呀呀</p>
            <p>咿呀呀呀呀呀</p>
            <p>咿呀呀呀呀呀</p>
            <p>咿呀呀呀呀呀</p>
            <p>咿呀呀呀呀呀</p>
        </div>
    </body>
</html>

在这里插入图片描述