Question

我花了最近3天创建了一个从数据库生成的菜单结构。除了我的List-items样式之外，它完美地运行。我用红色标出了问题区域的背景，当你将鼠标悬停在单词

上时，这些区域会显示出来

巴士站    员工
   栅栏
   车辆

这些红色框内的列表项目彼此并排显示，而不是彼此垂直显示。我不能为我的生活找出原因吗？

我创造了一个小提琴来说明我的问题：http://jsfiddle.net/devin85/tMYxT/4/

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

请有人帮忙！提前谢谢。

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;
}

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

Answer 2

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

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

Answer 3

你的CSS很乱。我们来清理吧。

首先让我们清楚浮动

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

然后，如果您的子菜单有position:absolute，那么父li应该有position:relative

.headerLeft li {
    position: relative;
}

从height删除header, #headerDiv。

以下是我现在所拥有的内容 - fiddle example。那么，你对它的期望是什么？

CSS列表 - 彼此不显示的项目

3 个答案: