CSS嵌套列表菜单悬停问题

Question

好吧，我的问题是，我的嵌套子类别应该隐藏，直到我将鼠标悬停在父类别上，但是当我将鼠标悬停在主父类别上时，所有子类别和子子类别都会显示。

如何解决此问题，以便仅显示父子类别，而不显示子类别子子类别，直到我将鼠标悬停在它们上？

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

Answer 1

@kei 你有办法解决我的问题吗？

好吧..假设该解决方案不涉及 IE6 支持并且仅涉及仅在悬停时显示直接子级的问题，那么是的，我可以有一个解决方案：

插入 > 如 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/

Answer 2

这就是你在 CSS 中想要的：

ul.cat-container li {
    display:  none;
}
ul.cat-container > li {
    display: list-item;
}
ul.cat-container li:hover > ol > li {
    display: list-item;
}

我相信你不需要那么混乱的长选择器之类的。上面的代码片段应该很好地涵盖了您的用例。

子选择器 (>) 在除 IE6 及更低版本之外的任何地方都有效。我希望您现在不再支持这些浏览器。