css - IE8 li :hover, 在 li 元素之间的空白处触发悬停？

Question

第一个菜单项有一个应该在 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; 
}

Answer 1

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