float nested li

Question

hi guys,

I'm trying to create a vertical menu and I need to make a multicolumn submenu. My code looks like this:

<style type="text/css" media="screen">


#nav {
     width: 100px;
    }
    #nav li {
     position: relative;
     background-color: red;
    }
    #nav li:hover .subnav {
     display: block;
    }
    .subnav {
     position: absolute;
     top: 0;
     left: 100px;
     display: none;
    }
    .subnav > li {
     float: left;
    }
</style>



<ul id="nav">
    <li>
     <a href="#">Link 1</a>
     <ul class="subnav">
      <li>
       <ul>
        <li>Col 1.1</li>
        <li>Col 1.2</li>
       </ul>
      </li>
      <li>
       <ul>
        <li>Col 2.1</li>
        <li>Col 2.2</li>
       </ul>
      </li>
      <li>
       <ul>
        <li>Col 3.1</li>
        <li>Col 3.2</li>
       </ul>
      </li>
     </ul>
    </li>
</ul>

My question is that why .subnav > li doesn't float left? I don't want to set width attribute, because I don't know how long the submenu item will be.

Answer 1

Is this a viable workaround:

.subnav ul li {
    display: inline;
}

(The hover doesn't seem to work in IE if that's a concern).

Answer 2

I think the reason it's not working is because of this part of the CSS:

#nav {
    width: 100px;
}

This doesn't leave the sub-nav any horizontal room, so all of the floats wrap to the next line. Removing the width from #nav appears to let it do the right thing. If you do this, you'll have to make sure that the top-level menu items' text doesn't exceed 100 pixels in length; otherwise, the sub-nav will overlap it.

(it still doesn't work in IE, though).