CSS nested list overlay issue

Question

Well, my problem is that my nested subcategories should be hidden until I draw over the parent category, but when I am above the main parent category, all subcategories and subcategories are displayed.

How can I fix this problem so that only child categories of parents are displayed, and not subcategories of subcategories until I hang on 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> <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> 

Answer 1

@kei do you have a solution to my problem?

Well .. assuming the solution is not related to IE6 support. And only involves the problem of displaying only 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 

script: http://jsfiddle.net/3sYCG/

Answer 2

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 that you do not need to mess with long selectors, etc. The above snippet should cover your information very well.

The child selector (>) works everywhere except IE6 and below. I hope you do not support these browsers these days.