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?
Here is the 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;
}
Here is the 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>
<l开发者_开发问答i><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 do you have a solution to my problem?
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:
Insert >
as shown in your 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
fiddle: http://jsfiddle.net/3sYCG/
Here is what you want in CSS:
ul.cat-container li {
display: none;
}
ul.cat-container > li {
display: list-item;
}
ul.cat-container li:hover > ol > li {
display: list-item;
}
I believe you don't need al that mess with long selectors and such. The above snippet should cover your usecase pretty well.
Child selector (>) does work everywhere except IE6 and below. I hope you don't support those browsers these days.
精彩评论