CSS nested list menu hover problem

Question

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>
                  <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>

I put this into a jsfiddle: jsfiddle.net/MVa62 and tested in chrome. Maybe if you simplify your css and markup it might be easier to fix the problems? This seems insidiously complex. — James Khoury
– James Khoury, Commented Jul 12, 2011 at 5:54
Your code is giving me a headache. Try being more specific with your selectors. Use child selectors > more so they only affect the immediate children, and not every element ul/ol/li element. — kei
– kei, Commented Jul 12, 2011 at 6:05

kei · Accepted Answer · 2011-07-12 06:24:45Z

2

@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/

answered Jul 12, 2011 at 6:24

kei

20.5k2 gold badges38 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

theFIVE Over a year ago

I like you solution but do you have an IE6 solution as well?

Moduo Over a year ago

How can one ever click the last item of the right menu? It closes when trying to click it because of the submenu which is collapsing.

kei Over a year ago

@Tom You will need to style the submenus to appear to the side instead of below then. If you want them to appear below, then you probably need a JavaScript solution to accomplish this instead of a purely CSS one.

spliter · Accepted Answer · 2011-07-12 06:41:11Z

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 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.

answered Jul 12, 2011 at 6:41

spliter

12.6k4 gold badges36 silver badges36 bronze badges

2 Comments

theFIVE Over a year ago

I wish can give out to checks for this solution as well:(

spliter Over a year ago

@theFIVE good you find it helpful. Pity you can not vote up or accept this solution ;)

Collectives™ on Stack Overflow

CSS nested list menu hover problem

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related