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

Question

过去 3 天，我创建了一个从数据库生成的菜单结构。除了我的列表项的样式之外，它工作得很好。我将问题区域的背景涂成红色，当您将鼠标悬停在文字上时，这些区域就会显示

Bus Stops
Employees
Fences
Vehicles

这些红色框中的列表项彼此并排显示，而不是垂直位于彼此下方。我一辈子都无法弄清楚为什么？

我创建了一个 fiddle 来说明我的问题:http://jsfiddle.net/devin85/tMYxT/4/

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

请有人帮忙!提前致谢。

Answer 1

这是因为你的CSS。

当你声明时

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

您告诉浏览器将导航下的所有 li 向左浮动，直到您另有指示为止。

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

当所有列表项位于二级子菜单中时，将告诉它不要 float 在所有列表项上。