Question

第一个菜单项有一个下拉子菜单，应该显示在li：hover上。出于某种原因，徘徊在任何一个li之间的边缘导致子菜单显示，我无法弄清楚原因。它在兼容模式下适用于Chrome和IE，但不适用于IE8。

以下是显示子菜单的CSS行：

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

对我来说，只要你徘徊一个li，就可以用以下风格设计其中任何一个孩子的样式。为什么这会在没有嵌套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”的原因是为了清除我的花车，但是允许我使用“margin：0 auto”轻松地将所包含的花车居中，这似乎是我找到的最好的解决方案，用于定位一个花盆容器

Answer 2

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

更新：好像你修好了

IE8 li：悬停，在li项之间的边距上触发悬停？

2 个答案: