html - css导航动画效果-PHP中文网问答

<!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;
        }
        p{
            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>
<p>很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大一串文字很大</p>
</body>
</html>
为什么点击隐藏的二级菜单也会出现动画效果呢？我在css中只是设置了点击一级菜单的li才有效果呀？