CSS嵌套列表菜单悬停问题 [英] CSS nested list menu hover problem
问题描述
好的,我的问题是,在我将鼠标悬停在父类别上之前,应该隐藏嵌套的子类别,但是当我将鼠标悬停在主要父类别上时,将显示所有子类别和子子类别.
Okay my problem is that my nested sub categories should be hidden until I hover over the parent category but when I hover over the main parent category all the sub categories and sub sub categories are displayed.
如何解决此问题,以便只显示父子类别,而不显示子类别子类别,直到将鼠标悬停在它们上面?
How can I fix this problem so that only the parents sub categories are displayed and not the sub categories sub sub categories until I hover over them?
这是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>
推荐答案
@kei您能解决我的问题吗?
好吧..假设该解决方案不涉及IE6-支持,而仅涉及在悬停时仅显示直接子级的问题,那么是的,我可能有一个解决方案:
Well.. assuming the solution doesn't involve IE6- support AND only involves the problem of displaying only the direct children on hover, then yes, I may have a solution:
插入css中显示的>
#nav-container ul.cat-container ol ol ol li:hover > ol > li > a
#nav-container ul.cat-container ol ol li:hover > ol > li > a
#nav-container ul.cat-container ol li:hover > ol > li > a
小提琴: http://jsfiddle.net/3sYCG/
这篇关于CSS嵌套列表菜单悬停问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!