2

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

公共汽车站
员工
围栏
车辆

这些红色框中的列表项彼此并排显示，而不是彼此垂直下方。我不能为我的生活解决为什么？

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

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

请有人帮忙！提前致谢。

4

3 回答 3

6

这是因为你的 CSS。

当你声明

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

您是在告诉浏览器将导航下的所有 li 都向左浮动，直到您另有说明为止。

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

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

于 2012-09-13T13:43:14.060 回答
2

如果将此行添加到 css 文件的末尾，它将阻止那些向左浮动的行：

#navigation .submenu li .submenu li {
    float:none;
}
于 2012-09-13T13:39:12.590 回答
1

你的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。

这是我现在拥有的 -小提琴示例。那么，你期望它是怎样的呢？

于 2012-09-13T13:52:06.367 回答