                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /css定位 position

三级目录不能隐藏

已经实现的效果，二级目录可以隐藏，但是三级目录不能隐藏，请高手帮忙看看，谢谢！

<!DOCTYPE html>

<head>

<title>Document</title>

.page{

width:100%;

height:2000px;

}

padding: 0;

margin: 0;

font-family: "microsoft yahei";

}

.nav{

width: 160px;

height: auto;

background: #666;

position: fixed;

top: 50%;

left:0;

color:#fff;

line-height: 40px;

text-align: center;

margin-top: -82px;

cursor: pointer;

}

.nav_1{

border-bottom: 1px solid #fff;

}

.nav_1_content>div{

height:auto;

width: 160px;

border-bottom: 1px dashed #fff;

background: #666;

}

.nav_1:hover div{

display: block;

}

.nav_1_content{

color:red;

display: none;

position: absolute;

left:160px;

top:0;

}

.nav_3title{

width: 160px;

height: auto;

background: #666;

display: none;

color:violet;

position: absolute;

left:160px;

top:0;

}

.nav_3{

border-bottom: 1px solid #fff;

}

</style>

</head>

<body>

<div class="nav_2">二级目录

</div>

</div>

</body>

</html>

慕容8429861

2018-07-18

源自：css定位 position 4-2

关注问题我要回答

1540

操作

收起

1 回答

qq_灬麦兜_0 回答被采纳 +2 积分
2018-07-19

<!--你写的当hover“ .nav_1” 它的时候下面的所有div显示 所有滑动 “.nav1的时候”三级目录也就跟随二级目录
一起显示出来了 我都给你改正了 你看下  就是hover的时候分隔开来  不让其他的受影响-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
 .page{
 width:100%;
            height:2000px;
        }
 *{
 padding: 0;
            margin: 0;
            font-family: "microsoft yahei";
        }
        .nav{
 width: 160px;
            height: 40px;
            background: #666;
            position: fixed;
            top: 50%;
            left:0;
            color:#fff;
            line-height: 40px;
            text-align: center;
            margin-top: -82px;
            cursor: pointer;
        }
        .nav_1{
 border-bottom: 1px solid #fff;

        }
        .nav_1_content>div{
 height:auto;
            width: 160px;
            border-bottom: 1px dashed #fff;
            background: #666;
        }
        .nav_1:hover .nav_1_content{
 display: block;
        }
        .nav_1_content{
 color:red;
            display: none;
            position: absolute;
            left:160px;
            top:0;
        }
        .nav_3title{
 width: 160px;
            height: auto;
            background: #666;
            display: none;
            color:violet;
            position: absolute;
            left:160px;
            top:0;
        }
        .nav_3{
 border-bottom: 1px solid #fff;
        }
        .nav_2:hover .nav_3title{
 display:block;
        }
 </style>
</head>
<body>
<div class="page">
    <div class="nav">
        <div class="nav_1">
            <div class="nav_1_title">一级目录</div>
            <div class="nav_1_content">
                <div class="nav_2">二级目录
 <div class="nav_3title">
                        <div class="nav_3">三级目录</div>
                        <div class="nav_3">三级目录</div>
                        <div class="nav_3">三级目录</div>
                    </div>
                </div>
                <div class="nav_2">二级目录
 <div class="nav_3title">
                        <div class="nav_3">2</div>
                        <div class="nav_3">三级目录</div>
                        <div class="nav_3">三级目录</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>