css导航动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表翻转效果</title>
    <style>
        *{padding:0;margin:0;}
        .nav{height:40px;width:400px;
            background-color: #333;
            margin:0 auto;
            margin-top:50px;
        }
        .nav li{
            height:40px;
            width:120px;
            background-color: #000;
            margin-left:10px;
            float:left;
            position:relative;
            color:snow;
            line-height:40px;
            text-align: center;
            font-size:20px;
            list-style:none;
        }
        .nav li ul{
            position:absolute;
            left:0;
            top:40px;
        }
        .nav-2 li{
            margin-left:0;
            background-color: #000;
            opacity:0;
            transform:rotateY(180deg);
        }
        .nav>li:hover .nav-2 li{
            opacity:1;
            transform:none;
        }
        .nav li .nav-2 li{
            transition:all 2s;
        }
        .nav li:hover .nav-2 li:nth-child(1){
            -webkit-transition-delay: 0s;
            -moz-transition-delay: 0s;
            -ms-transition-delay: 0s;
            -o-transition-delay: 0s;
            transition-delay: 0s;
        }

        .nav li:hover .nav-2 li:nth-child(2){
            -webkit-transition-delay: 200ms;
            -moz-transition-delay: 200ms;
            -ms-transition-delay: 200ms;
            -o-transition-delay: 200ms;
            transition-delay: 200ms;
        }
        .nav li:hover .nav-2 li:nth-child(3){
            -webkit-transition-delay: 400ms;
            -moz-transition-delay: 400ms;
            -ms-transition-delay: 400ms;
            -o-transition-delay: 400ms;
            transition-delay: 400ms;
        }
        .nav li:hover .nav-2 li:nth-child(4){
            -webkit-transition-delay: 600ms;
            -moz-transition-delay: 600ms;
            -ms-transition-delay: 600ms;
            -o-transition-delay: 600ms;
            transition-delay: 600ms;
        }
        .nav li:hover .nav-2 li:nth-child(5){
            -webkit-transition-delay: 800ms;
            -moz-transition-delay: 800ms;
            -ms-transition-delay: 800ms;
            -o-transition-delay: 800ms;
            transition-delay: 800ms;
        }
        .nav li .nav-2 li:nth-child(5){
            -webkit-transition-delay: 0ms;
            -moz-transition-delay: 0ms;
            -ms-transition-delay: 0ms;
            -o-transition-delay: 0ms;
            transition-delay: 0ms;
        }
        .nav li .nav-2 li:nth-child(4){
            -webkit-transition-delay: 200ms;
            -moz-transition-delay: 200ms;
            -ms-transition-delay: 200ms;
            -o-transition-delay: 200ms;
            transition-delay: 200ms;
        }
        .nav li .nav-2 li:nth-child(3){
            -webkit-transition-delay: 400ms;
            -moz-transition-delay: 400ms;
            -ms-transition-delay: 400ms;
            -o-transition-delay: 400ms;
            transition-delay: 400ms;
        }
        .nav li .nav-2 li:nth-child(2){
            -webkit-transition-delay: 600ms;
            -moz-transition-delay: 600ms;
            -ms-transition-delay: 600ms;
            -o-transition-delay: 600ms;
            transition-delay: 600ms;
        }
        .nav li .nav-2 li:nth-child(1){
            -webkit-transition-delay: 800ms;
            -moz-transition-delay: 800ms;
            -ms-transition-delay: 800ms;
            -o-transition-delay: 800ms;
            transition-delay: 800ms;
        }
        div{
            width:400px;
            margin:0 auto;
            border:solid;
            box-sizing:border-box;
            background-color: red;
            font-size:18px;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>菜单1
            <ul class="nav-2">
                <li>我是菜单2</li>
                <li>我是菜单2</li>
                <li>我是菜单2</li>
                <li>我是菜单2</li>
                <li>我是菜单2</li>
            </ul>
        </li>
        <li>菜单1
            <ul class="nav-2">
                <li>我是菜单2</li>
                <li>我是菜单2</li>
                <li>我是菜单2</li>
                <li>我是菜单2</li>
                <li>我是菜单2</li>
            </ul>
        </li>
        <li>菜单1
            <ul class="nav-2">
                <li>我是菜单2</li>
                <li>我是菜单2</li>
                <li>我是菜单2</li>
                <li>我是菜单2</li>
                <li>我是菜单2</li>
            </ul>
        </li>
    </ul>
<div>很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大</div>
</body>
</html>

为什么点击隐藏的二级菜单也会出现动画效果呢?我在css中只是设置了点击一级菜单的li才有效果呀?

阅读 2.8k
1 个回答
.nav li

这种形式,命中的是.nav下所有子级li,不管你套几层,只要是在.nav子级的方向就会命中。
要达到你的目的,需要加“>”改成:

.nav>li

这样就只会命中.nav的直属子级,再往下就管不到了。

还有你

.nav li:hover .nav-2 li

类似这种写法有点没必要,直接给li个类名不就得了?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题