CSS - ドロップラインメニューの問題

Question

ユーザがサブカテゴリを持つカテゴリの上を移動したときに新しい行がリンクでドロップするように、CSSの位置を正しく設定できないようです。

私はこれをどのように達成できますか？

私はあなたに知らせるために、約6レベルの深いサブサブカテゴリを多数持っています。

ここは私の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で説明しています。