css - float 嵌套里

Question

我正在尝试创建一个垂直菜单，我需要制作一个多列子菜单。我的代码如下所示:

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

我的问题是为什么 .subnav > li 不向左浮动？我不想设置宽度属性，因为我不知道子菜单项会有多长。

Answer 1

我认为它不起作用的原因是 CSS 的这一部分:

#nav {
    width: 100px;
}

这不会给子导航留下任何水平空间，所以所有的 float 都换行到下一行。从 #nav 中删除宽度似乎让它做正确的事情。如果这样做，您必须确保顶级菜单项的文本长度不超过 100 像素；否则，子导航将与它重叠。

(尽管它在 IE 中仍然不起作用)。