<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>側邊導航條跟蹤</title>
????<style?type="text/css">
????*{margin:0;padding:?0;}
????.container{
????????width:?100%;
????????height:?4043px;
????????background:?url(http://climg.mukewang.com/59c9f7ce0001839219034033.png)?center?top?no-repeat;}
????????.nav{
????????????width:?160px;
????????????height:?auto;
????????????background:?#ddd;
????????????text-align:?center;
????????????position:?fixed;
????????????top:?50%;
????????????margin-top:?-103px;
????????????cursor:?pointer;
????????????}
????????.nav-list1?li{
????????????width:?100%;
????????????height:?auto;
????????????line-height:?40px;
????????????border-bottom:?1px?solid?#999;
????????????list-style:none;
????????????}
????????.nav-list2?li{
????????????width:?100%;
????????????height:?40px;
????????????color:?#fff;
????????????}
????????.nav-list2{
????????????width:?100%;
????????????height:?auto;
????????????background:?#aaa;
????????????display:?none;
????????????position:?relative;
????????????}
????????.nav-list1?li:hover?.nav-list2{
????????????display:?block;
????????????}
????????.nav-list3{
????????????width:?100%;
????????????height:?auto;
????????????background:?pink;
????????????display:?none;
????????????position:?absolute;
????????????top:?0;
????????????left:?160px;
????????????}
????????.nav-list3?li{
????????????width:?100%;
????????????height:?40px;
????????????color:?#fff;
????????????}
????????.nav-list1?li?.nav-list2?li:hover?.nav-list3{
????????????display:?block;
????????????}
????????</style>
?</head>
?<body>
?????<div?class="container">
?????????<div?class="nav">
?????????????<div?class="nav-list1">
?????????????????<ul>
?????????????????????<li>側邊導航條
?????????????????????????<div?class="nav-list2">
?????????????????????????????<ul>
?????????????????????????????????<li>二級欄目
?????????????????????????????????????<div?class="nav-list3">
?????????????????????????????????????????<ul>
?????????????????????????????????????????????<li>三級欄目</li>
?????????????????????????????????????????????<li>三級欄目</li>
?????????????????????????????????????????????<li>三級欄目</li>
?????????????????????????????????????????</ul>
?????????????????????????????????????</div>
?????????????????????????????????</li>
?????????????????????????????????<li>二級欄目
?????????????????????????????????????<div?class="nav-list3">
?????????????????????????????????????????<ul>
?????????????????????????????????????????????<li>三級欄目</li>
?????????????????????????????????????????????<li>三級欄目</li>
?????????????????????????????????????????????<li>三級欄目</li>
?????????????????????????????????????????</ul>
?????????????????????????????????????</div>
?????????????????????????????????</li>
?????????????????????????????????<li>二級欄目
?????????????????????????????????????<div?class="nav-list3">
?????????????????????????????????????????<ul>
?????????????????????????????????????????????<li>三級欄目</li>
?????????????????????????????????????????????<li>三級欄目</li>
?????????????????????????????????????????????<li>三級欄目</li>
?????????????????????????????????????????</ul>
?????????????????????????????????????</div>
????????????????????????????????</li>
????????????????????????????</ul>
?????????????????????????</div>
?????????????????????</li>
?????????????????????<li>側邊導航條</li>
?????????????????????<li>側邊導航條</li>
?????????????????????<li>側邊導航條</li>
?????????????????????<li>側邊導航條</li>
?????????????????</ul>
?????????????</div>
?????????</div>
????</div>
</body>
</html>
為什么鼠標移到第二個“二級欄目”時，不會顯示它的三級欄目？（復制代碼可直接運行）
SimonYangym
2018-06-14 22:44:40
