Html 位置和浮动在CSS下拉列表中导致无法解释的行为

我找到了那个玩具，正在玩它

请看下面的JSFIDLE-

• 第一个菜单-

  。菜单

  是一个
• 第二个-

  .menu2

  已由我修改

当我从中删除

位置：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

并排出现，但我们也必须删除

位置：relative

，才能达到这种效果。为什么会这样？

第二个

ul

位于绝对位置，位于第一个

li

元素内，该元素位于相对位置。这导致

ul

不依赖于车身元件，而是依赖于

li

元件。因此，它不能长于

li

元素的宽度，因此

ul

元素内的所有内容都尽可能位于

li

元素的宽度内

因此，问题不是第二级

li

元素，而是第一级元素

您可以使用

选择器在第一级

li

和第二级

之间进行区分