html - position 和 float 在 CSS 下拉菜单中导致无法解释的行为

Question

我找到了 code for a dropdown here on stackoverflow并正在玩它。

请看下面的jsfiddle -

http://jsfiddle.net/ArF8q/

• 第一个菜单 - .menu 是一个 normal dropdown menu that I found on SO .
• 第二个 - .menu2 已由我修改。

当我从 -

中删除 position:relative 时

.menu ul li {
    display: block;
    position: relative;
    float: left;
}

并删除 float:none -

.menu li:hover li {
    float: none;
    font-size: 11px;
}

从 .menu 我得到 .menu2，它以水平方式显示下拉菜单。

我无法理解为什么。我假设简单地删除 float:none 会使 li 并排出现，但我们也必须删除 position:relative达到那个效果。这是为什么？

Answer 1

第二个ul位于绝对位置并位于第一个 li 内相对定位的元素。这导致 ul不依赖于 body 元素，而是依赖于 li元素。因此它不能长于 li 的宽度。元素，以便此 ul 中的所有内容元素的位置尽可能在 li 的宽度内元素。

因此问题不在二级li元素，但第一级。

您可以使用 >选择器在第一级之间做出区别li和第二级。