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＆gt;李不飘左？我不想设置宽度属性，因为我不知道子菜单项会有多长。

Answer 1

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

#nav {
    width: 100px;
}

这不会使子导航器处于任何水平空间，因此所有浮动包裹到下一行。从#nav中删除宽度似乎让它做正确的事情。如果这样做，您必须确保顶级菜单项的文本长度不超过100像素;否则，子导航将重叠。

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

Answer 2

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

.subnav ul li {
    display: inline;
}

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

浮动嵌套李

2 个答案: