Horizontal dropdown menu with vertical

Question

I'm trying to modify a template navigation bar to have a dropdown on how-to hover, but I can't seem to get sub 2 to drop below sub 1.

I also noticed that things break when put to mobile size and is hovered. (but that's because I haven't worried about the mediascreen yet).

Any ideas?

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;
}

For full code see Fiddle: https://jsfiddle.net/m7tnf8ao/

Answer 1

Your submenu li elements were picking a float from nav li rule.

Added on line 38 in jsfiddle:

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