Question

我知道这个问题被问了很多次，但我在CSS中创建子菜单时遇到了问题。我是CSS的新手并且对此知之甚少但是在尝试了Google之后我尝试了一个使用CSS的小菜单，一切正常但是只有子菜单没有堆叠的方式

这是我的代码：

<body>
    <ul>
        <li><a href="#">Example 1</a></li>
        <li><a href="#">Example 2</a></li>
        <li><a href="#">Example 3</a>
            <ul>
                <li><a href="#">Example 4</a></li>
                <li><a href="#">Example 5</a></li>
            </ul>
        </li>
        <li><a href="#">Example 6</a></li>
    </ul>
</body>

CSS

ul
{
    list-style:none;
    padding: 8px 15px;
}
li
{
    float:left;
}
li a
{
    background: #CCC;
    text-decoration:none;
    color:black;
}
li ul
{
    display:none;
    position:absolute;
    padding:0;
    margin:0;
    list-style:none;
    background-color:#999;
}
li:hover > ul
{
    display:block;
}
li ul a
{
    display:block;
}

这是我的JSFiddle链接。请告诉我在哪里弄错了。

Answer 1

进行什么

你的顶级li是浮动的，这是有道理的。如果您希望子菜单堆叠，您只需要将li转到float:none。

CODE

Working Fiddle

li ul li {
    float:none;
}

截图

enter image description here

Answer 2

将此添加到您的代码中

ul ul li {
    float:none;
    display: block;
}

问题是，您第一次设置为li {float:left}并且它会影响子菜单中的下一个li。所以你只需要float:none

Answer 3

您的问题是li { float:left; }样式适用于所有li元素，包括嵌套元素。您需要覆盖应用于嵌套子菜单项的样式，例如ul li ul li { float: none; }。

最后，使用类来应用样式而不是直接将它们应用于元素可能更好。这是Twitter Bootstrap为其navbar采用的方法。这可能如下所示：

<body> <ul class="menu"> <li><a href="#">Example 1</a></li> <li><a href="#">Example 2</a></li> <li><a href="#">Example 3</a> <ul class="submenu"> <li><a href="#">Example 4</a></li> <li><a href="#">Example 5</a></li> </ul> </li> <li><a href="#">Example 6</a></li> </ul> </body>

ul.menu > li { float: left; }

在这种情况下，样式仅应用于.menu的子项，而不是所有li元素。如果您稍后在页面中使用列表，这将非常有用。

Answer 4

ul li {float:left}
ul li ul li {display:block;clear:both;}

Answer 5

让子菜单中的项目垂直显示的最简单方法是在子菜单中添加一个类并定位li，以便使用float:none;删除float属性

这是一个更新的小提琴：http://jsfiddle.net/r52sX/2/

如果您有多个子菜单列表，我已经添加了类而不是仅仅为了li元素的作用域，以使其适用

Answer 6

float属性指定框（元素）是否应该浮动。

<强> DEMO

<强> CSS

li ul li {
    float: none;
}

在css中创建子菜单

6 个答案:

进行什么

CODE

截图