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

回答1:

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

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

来源：https://stackoverflow.com/questions/6659814/css-nested-list-menu-hover-problem

标签

css

nested-lists