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 psuedo-class，但是this page会指导您如何做到这一点。