縦の横のドロップダウンメニュー

Question

テンプレートのナビゲーションバーを変更して、 how-toのホバーにドロップダウンを設定しようとしましたが、をsub 1以下にドロップできないようです。

私はまた、モバイルサイズに置かれたときに物が壊れていることに気付きました。 （しかし、私はまだmediascreenについて心配していないので）。

アイデア？完全なコードについては

See the fiddle for the full code.

HTML

<!-- Navigation options --> 
<nav class="clearfix"> 
    <ul class="clearfix"> 

     <li><a href="#">Home</a></li> 
     <li><a href="#">How-to</a> 
<ul id="submenu"> 
<li><a href="#">sub1</a> 
<li><a href="#">sub2</a> 
</ul> <!--end sub ul--> 
     </li> 
     <li><a href="#">Icons</a></li> 
     <li><a href="#">Design</a></li> 
     <li><a href="#">Web 2.0</a></li> 
     <li><a href="#">Tools</a></li> 
    </ul> <!-- end ul clearfix --> 
    <a href="#" id="pull">Menu</a> 
</nav> <!-- end nav clearfix --> 

CSS

.clearfix li:hover ul { 
display: block; 
} 

.clearfix li ul { 
display: none; 
position: absolute; 
top:100%; 
background: #455868; 
width: auto; 
height: auto; 
vertical-align: top; 
} 

.clearfix li ul li { 
width: auto; 
} 

.clearfix li ul a { 
display: block; 
} 

フィドルを参照してください。 https://jsfiddle.net/m7tnf8ao/

Answer 1

あなたのサブメニュー要素はnav liルールからフロートを選んでいました。 jsfiddleでライン38上の

を追加しました：SUB1の下にサブ2つくれを作るために

.clearfix li ul li { 
    width: auto; 
    float:none; /* <- this one here */ 
} 

Answer 2

は、サブメニューのフロートプロパティをオフにします。で解決

#submenu li { 
    float: none; 
} 

第二の問題：

@media screen and (max-width: 600px) { 
    #submenu { 
    position: static; 
    } 
}