在 CSS 中创建子菜单答案

【问题标题】：creating submenu in css在 CSS 中创建子菜单
【发布时间】：2014-06-18 23:37:48
【问题描述】：

我知道这个问题被问了很多次，但是我在 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 链接。请告诉我哪里出错了。

【问题讨论】：

那么你想让子菜单项垂直显示吗？
是的，但它水平显示在@Bobby5193

标签： html css submenu

【解决方案1】：

发生了什么

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

代码

Working Fiddle

li ul li {
    float:none;
}

截图

【讨论】：

【解决方案2】：

将此添加到您的代码中

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

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

【讨论】：

【解决方案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 元素。如果您稍后在页面中使用列表，这将非常有用。

【讨论】：

+1 用于回答和超越课堂理念，以及 Bootstrap 示例。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

我已经添加了类，而不是仅仅限定 li 元素的范围，以便在您有多个子菜单列表时使其适用

【讨论】：

【解决方案6】：

float 属性指定一个盒子（一个元素）是否应该浮动。

DEMO

CSS

li ul li {
    float: none;
}

【讨论】：