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会指导您完成此操作。

CSS - 丢弃行菜单问题

1 个答案: