CSS - 下拉菜单问题

Question

我似乎无法获得正确的 css 定位，因此当用户将鼠标悬停在具有子类别的类别上时，新行会与链接一起掉落。

我想知道我怎样才能做到这一点？

为了让您知道，我有很多大约六层深的子类别。

这是我的 CSS。

#nav-container {
    border-top: 2px solid #000000;
    float: left;
    font-weight: bold;
    margin: 0;
    padding: 5px 0px;
    width: 100%;    
    background: #0098ff;
    list-style-type: none;
}

#nav-container ol {
    list-style-type: none;
    margin: 0 auto;
    padding: 0px;
    text-align: left;
    width: 1024px;
}

#nav-container li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: auto;
}

#nav-container ol h2 {
    font-size: .9em;
    margin: 0px;
    width: 236px;
    float: left;
}

ul.cat-container li {
    display:  none;
}

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

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

ul.cat-container ol {
    list-style-type: none;
    margin: 0 auto;
    padding: 0px;
    text-align: left;
    width: 1024px;
    position: absolute;
    left: 0;
    top: 440;   
}

ul.cat-container ol li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 246px;   
}

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

通常这是使用 JavaSript 或 jQuery 完成的，方法是在用户将鼠标悬停在子菜单上时更改可见性。

纯 CSS 解决方案很棘手，需要 hover 伪类，但是 this page引导您完成操作。