Css 浮动嵌套李

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

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

#导航{
宽度：100px；
}
#李海军{
位置：相对位置；
背景色：红色；
}
#导航李：悬停，亚导航{
显示：块；
}
.subnav{
位置：绝对位置；
排名：0；
左：100px；
显示：无；
}
.subnav>li{
浮动：左；
}





第1.1栏
第1.2栏




第2.1栏
第2.2栏




第3.1栏
第3.2栏

---

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

这是一个可行的解决方法：

.subnav ul li {
    display: inline;
}

---

（悬停在IE中似乎不起作用，如果这是一个问题）。

这是一个可行的解决方法：

.subnav ul li {
    display: inline;
}

---

（悬停在IE中似乎不起作用，如果这是一个问题）。

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

#nav {
    width: 100px;
}

这不会使子导航保留任何水平空间，因此所有浮动都会环绕到下一行。删除#nav的宽度似乎可以让它做正确的事情。如果你这样做，你必须确保顶级菜单项的文本长度不超过100像素；否则，副导航将与之重叠

---

（但它在IE中仍然不起作用）。

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

#nav {
    width: 100px;
}

这不会使子导航保留任何水平空间，因此所有浮动都会环绕到下一行。删除#nav的宽度似乎可以让它做正确的事情。如果你这样做，你必须确保顶级菜单项的文本长度不超过100像素；否则，副导航将与之重叠

---

（但在IE中仍然不起作用）。

不，那不起作用。我在mac上使用ff3.5和safari 4，我现在不担心ie。不，那不起作用。我在mac上使用ff3.5和safari 4，我现在不担心ie。你是对的，但如果我删除#nav的宽度，则意味着它的宽度将等于它的父级宽度（即身体宽度）。然而，在我的网站上，这个导航位于一个宽度为100px的潜水舱内。如果我把这个导航放在div之外，那么整个布局就会乱七八糟。然后我看不出有什么办法可以设置子导航的宽度。如果您只是将其设置为可用的最大宽度（假设主体具有固定的宽度）并为其提供透明背景，则无论有多少子导航项。您是对的，但如果我删除#nav的宽度，则意味着它的宽度将等于其父项的宽度（即主体宽度）。然而，在我的网站上，这个导航位于一个宽度为100px的潜水舱内。如果我把这个导航放在div之外，那么整个布局就会乱七八糟。然后我看不出有什么办法可以设置子导航的宽度。如果您只是将其设置为可用的最大宽度（假设主体具有固定宽度）并为其提供透明背景，则无论有多少子导航项都不重要。