CSS：複数列のドロップダウン

Question

jsFiddle：http://jsfiddle.net/4z2Vx/

Iは、複数列のドロップダウン/メニューウィジェットを作成しようとしています。

左の画像は、私のウェブサイトである、jsFiddle内部に残っ。明白な色+フォントは別として、なぜjsFiddleがアラインメントを改ざんしているのか分かりません。これは問題ではなく、問題は最初の列が2番目の列の下に隠れているということです...私は数時間試しましたが、並んで表示することはできません。

Answer 1

問題はfloatは動作しませんあなたが絶対配置された親を.firstと.second（griswoldoの答えとして）上に置くように、あなたはhtmlを再構成することができます。またはドロップダウンのための幅を設定し、それらを配置：

.dropdown li ul { 
    display: none; 
    border:black 1px solid; 
    position:absolute; 
    background-color:white; 
    width: 150px; /*set the width*/ 
} 


.second { 
    left: 150px; /*set the position*/ 
}​ 

http://jsfiddle.net/tYeDk/

Answer 2

問題は.dropdown李のULルールで

position: absolute; 

のようです。それを削除してulの外にある "コレクション"リンクを移動すると、両方のメニューが並んで（そして "コレクション"の下に）表示されます。また、それらを直接隣に置く場合は、.firstと.secondの両方でfloatをleftに設定する必要があります。

チェックアウト私はあなたのフィドルにしたこのクイックMOD（完璧ではないが、私はあなたがここからそれを取ることができる把握）：http://jsfiddle.net/4z2Vx/29/

Answer 3

さて、私はあなたのコードを経て、あなたがmegamenuのようなものを必要とすることを理解しています。あなたのコードで...あなたはあなたのサブメニューulを絶対に毒殺しました。それが浮動小数点を無視している理由です。あなたは夜は絶対

を配置するために子供を作るために必要なものについては

だからあなたのHTMLは

<div class="dropdown"> 
<ul id="menus"><li>Collections 
     <ul class="sub"> 
      <ul>   
      <li><a href="#">ABC/BBC</a></li> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Animated</a></li> 
      <li><a href="#">Children</a></li> 
      <li><a href="#">Documentary</a></li> 
      <li><a href="#">Drama</a></li> 
      <li><a href="#">Cult</a></li> 
    </ul> 
    <ul> 
      <li><a href="#">Family</a></li> 
      <li><a href="#">Fantasy</a></li> 
      <li><a href="#">Horror</a></li> 
      <li><a href="#">Lifestyle</a></li> 
      <li><a href="#">Mystery</a></li> 
      <li><a href="#">Reality</a></li> 
      <li><a href="#">Sciene fiction</a></li> 
     </ul> 
     </ul> 


</li> 
</ul> 
</div>​ 

とCSSもウィルあなたは多くのとしてULを追加することができ、これと

.dropdown 
{ 
    font-size:16px; 
    font-weight:400; 
    line-height:40px; 
    text-indent:15px; 
    padding-right:15px; 
    vertical-align:middle; 
    display:inline-block; 
} 

.dropdown:hover 
{ 
    background-color:green; 
} 

.dropdown li ul.sub { 
    display: none; 
    border:black 1px solid; 
    position:absolute; 
    background-color:white;  
} 

.dropdown ul 
{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 

.dropdown a 
{ 
    display:block; 
    padding-right:15px; 
    line-height:30px; 
} 

.dropdown a:hover { 
    color: rgb(0,0,0); 
    text-decoration: underline; 
} 

.dropdown li:hover 
{ 
    background-color:green; 
} 

#menus ul.sub ul{ 
    float:left 
}​ 

になりますあなたが望むように...