Question

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

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).