Jquery CSS列表项不显示在彼此下方

我花了3天时间创建了一个从数据库生成的菜单结构。除了我的列表项样式之外，它工作得非常好。我已将问题区域的背景涂成红色，当您将鼠标悬停在单词上方时，这些区域会显示出来

公共汽车站
员工
栅栏
车辆

这些红色框中的列表项彼此并排显示，而不是垂直向下显示。我一辈子都搞不懂为什么

我制作了一把小提琴来说明我的问题：

我还在Javascript部分将背景颜色设置为红色，以帮助显示悬停事件发生的位置，并节省任何好心人搜索代码的时间

---

请有人帮忙！提前感谢。

如果您将这一行添加到css文件的末尾，它将停止那些向左浮动的行：

#navigation .submenu li .submenu li {
    float:none;
}

---

这是因为你的CSS

当你申报时

#navigation li, .headerRight li { margin: 4px 7px 4px 2px; padding: 0px; float: left; background-color: Transparent; }

您告诉浏览器在导航下向左浮动所有li，直到您告诉它其他情况

#navigation .submenu .submenu li {
   float:none;
}

---

当它们在第二级子菜单中时，将告诉它不要在所有列表项上浮动。

您的css一团糟。我们来打扫吧

首先，让我们清理浮标

#logo,#currentPage {
    clear:both;
}
.clearfix{
    clear: both;
}
#headerDiv:after, #navigation:after{
    content: '';
    display:block;
    clear:both;
}

然后，如果子菜单具有

位置：绝对

，则父级

li

应具有

位置：相对

.headerLeft li {
    position: relative;
}

从

收割台#headerDiv

上卸下

高度

这就是我现在所拥有的。那么，你认为会是怎样的呢？
太棒了。谢谢你，克诺伯特！奇怪的是，我应用了JS中的CSS更改，在同一个地方，我将BGColor设置为红色，但没有使用。最后，你知道我将如何获得绝对定位的二级菜单，根据其内容检测其宽度和高度。正如您可能看到的，内容没有保留在其内容区域内。谢谢DevinHey@user1434739，我只是想知道为什么你不接受我的正确答案，因为它早在Knollberts之前就发布了？谢谢Billy，但Knollbert已经回答了。剩下的问题是如何获得绝对定位的level 2菜单，根据其内部内容检测其宽度和高度。正如您可能看到的，内容没有保留在4个子菜单的内容区域内。如果你能帮忙，那就太好了。我已经更新了小提琴：……谢谢恶魔耶，但我想说的是我比克诺伯特早回答了。没什么大不了的，只是Stackoverflow上的首选表单是接受最先发布的最佳正确答案。您应该将第二个问题作为新问题发布。抱歉，我没有看到。另外，如果我没有被误解的话，他的CSS选择器更干净。我将提出一个新问题。再次感谢：）嗨，亚历山大。没有，我的布局是正确的。剩下的唯一问题是如何获得绝对定位的level 2菜单，根据其内部内容检测其宽度和高度。正如您可能看到的，内容没有保留在4个子菜单的内容区域内。如果你能帮忙，那就太好了。我已经更新了fiddle:jsfiddle.net/devin85/tMYxT/7…谢谢您，您只需使用
white space:nowrap用于
li
元素。