2

第一个菜单项有一个下拉子菜单，应该显示在 li:hover 上。但是，由于某种原因，悬停在任何 li 之间的边距会导致子菜单显示，我不知道为什么。它以兼容模式在 Chrome 和 IE 中运行，但不适用于 IE8。

这是显示子菜单的 CSS 行：

.menu li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; 
    }

对我来说，这意味着每当您将鼠标悬停在一个 li 上时，都使用以下样式设置其任何子 ul 的样式。为什么这会在没有嵌套 ul 的 li 之间的边距上触发？

这是菜单的整个 CSS 以防万一：

.menu {
font-weight: normal;
font-size: 1.1em;
margin-top: 5px;
padding: 5px 0 0 0;
font-family: OswaldLight;
display: table;
margin: 0 auto;
}

.menu li {
list-style: none;
float: left; 
margin-right: 10px;
}

.menu li a {
display: block;
text-decoration: none; 
padding:5px;
color:@navbar-text;
background:@navbar;
text-decoration:none;
}

.menu li ul {
display: none; 
background-color: @navbar;

}

.menu li ul li {
margin: 0;
}

.menu li a:hover {
color: @navbar-text-highlight;
background-color: @navbar-highlight; 
}

.menu li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; 
}

.menu li:hover li {
float: none; 
}

.menu li:hover li a {
background-color: @navbar;
color: @navbar-text;
}

.menu li li a:hover {
color: @navbar-text-highlight;
background-color: @navbar-highlight; 
}
4

2 回答 2

1

对于任何想知道的人，问题出在 .menu 类中的“display:table”。.menu 类被分配给父 UL，而 IE8 不知道如何处理它。我删除了那条线，在父级周围添加了一个父级，并给出了“display:table”，它似乎解决了这个问题。我使用“display:table”的原因是为了清除我的浮动，但允许我使用“margin：0 auto”轻松地将包含的浮动居中，这似乎是我找到的将浮动容器居中的最佳解决方案.

于 2012-06-29T14:57:17.650 回答
0

它可能与子菜单的 ul 宽度有关，我将不得不进一步研究它，但很可能这是 IE 中的宽度问题

更新：看来你修好了

于 2012-06-29T14:42:30.143 回答