三級目錄不能隱藏
已經實現的效果，二級目錄可以隱藏，但是三級目錄不能隱藏，請高手幫忙看看，謝謝！
<!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: 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="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>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ?</div>
</body>
</html>
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>