好的,我的问题是我的嵌套子类别应该隐藏,直到我将鼠标悬停在父类别上,但是当我将鼠标悬停在主父类别上时,所有子类别和子子类别都会显示。
如何解决此问题,以便仅显示父子类别而不显示子类别子子类别,直到我将鼠标悬停在它们上方?
这是CSS。
#nav-container ul.cat-container ol ol ol ol li a {
visibility: hidden;
height: 0;
display: none;
}
#nav-container ul.cat-container ol ol ol li a {
visibility: hidden;
height: 0;
display: none;
}
#nav-container ul.cat-container ol ol li a {
visibility: hidden;
height: 0;
display: none;
}
#nav-container ul.cat-container ol li {
visibility: hidden;
height: 0;
display: none;
}
#nav-container ul.cat-container ol ol ol li:hover ol li a {
visibility: visible;
height: auto;
display: block;
}
#nav-container ul.cat-container ol ol li:hover ol li a {
visibility: visible;
height: auto;
display: block;
}
#nav-container ul.cat-container ol li:hover ol li a {
visibility: visible;
height: auto;
display: block;
}
#nav-container ul.cat-container li.cat-header:hover ol li {
visibility: visible;
height: auto;
display: block;
}
这是HTML。
<div id="nav-container">
<ol>
<li>
<ul class="cat-container">
<li class="cat-header">
<h2><a href="#"class="header">First Nested List</a></h2>
<ol>
<li><a href="#">Second Nested List</a></li>
<li><a href="#">Second Nested List</a></li>
</ol>
</li>
<li class="cat-header">
<h2><a href="#" class="header">First Nested List</a></h2>
<ol>
<li><a href="#">Second Nested List</a></li>
<li><a href="#">Second Nested List</a></li>
</ol>
</li>
<li class="cat-header">
<h2><a href="#" class="header">First Nested List</a></h2>
<ol>
<li><a href="#">Second Nested List</a></li>
<li><a href="#">Second Nested List</a>
<ol>
<li><a href="#">Third Nested List</a></li>
<li><a href="#">Third Nested List</a>
<ol>
<li><a href="#">Fourth Nested List</a></li>
<li><a href="#">Fourth Nested List</a></li>
</ol>
</li>
<li><a href="#">Third Nested List</a>
<ol>
<li><a href="#">Fourth Nested List</a>
<ol>
<li><a href="#">Fifth Nested List</a></li>
<li><a href="#">Fifth Nested List</a></li>
</ol>
</li>
<li><a href="#">Fourth Nested List</a></li>
</ol>
</li>
<li><a href="#">Third Nested List</a></li>
</ol>
</li>
<li><a href="#">Second Nested List</a></li>
</ol>
</li>
</ul>
</li>
</ol>
</div>