Question

我正在尝试使用＆＃39; float：none;＆＃39;制作一个css下拉菜单。为了使子菜单以实际的默认列表格式显示。但是，由于某种原因，它没有按预期工作，所以我决定向你提交代码，以便你可以向我解释。提前谢谢。

这是HTML：

    <div class="top_menu">
         <ul>
            <li><a href="#">Home</a> </li>
            <li>
                <a href="#">Habits</a>
                <ul class="sub_menu">
                    <li><a href="#">Femme </a></li>
                    <li><a href="#">Homme </a></li>
                    <li><a href="#">Enfant </a></li>
                </ul>

            </li>
            <li><a href="#">Déco </a></li>
            <li><a href="#">Liste </a></li>
            <li><a href="#">Contact </a></li>
        </ul>
    </div>

现在是CSS：

.top_menu ul {

list-style-type: none;
margin: 0;
padding: 0;
}

.top_menu ul li {

float: left;
}

.sub_menu li {

float: none;
}

Answer 1

这是选择器优先级的问题。两个选择器都与叶子列表项匹配，但.top_menu ul li的优先级高于.sub_menu li，因为它包含更多路径步骤。

Answer 2

这样做：

.top_menu > ul > li {
    float: left;
}

然后您可以随意设置.sub_menu li样式。

Answer 3

如果我理解你的问题，这可能适合你。

<强> Demo Fiddle

在原始CSS中，.top_menu的样式影响了所有li个子元素。您想使用>选择器确保您只将浮动应用于top_menu li元素

CSS：

.top_menu > ul > li {
  float: left;
}

CSS下拉菜单，浮动重置不起作用，为什么？

3 个答案: