Question

我的CSS是：

#menu {
    background-color: #a40a0a;
    width: 830px;
    height: 36px;
    position: relative;
    top: 39px;
    left: 172px;
}
#menu >ul {
    list-style-type: none;
}
#menu ul li {
    font-family: Arial, Helvatica, Verdana;
}
#menu ul li >a {
    display: block;
    float: left;
    text-decoration: none;
    color: #ffffff;
    line-height: 36px;
    width: 166px;
    text-align: center;
}
#menu ul li >a:hover {
    background-color: #d74343;
    border-bottom: 2px solid #bc1515;
    line-height: 34px;
}
#menu ul li >a:active {
    background-color: #a40a0a;
}

此菜单看起来不正确ie7及以下。如果这是错的，请告诉我，对，谢谢。

http://jsfiddle.net/a4Qe3/这是链接

Answer 1

您需要将float放在li而不是a上。这是因为李将每次阻止。

以下是更新后的代码：

<强> CSS

#menu {
    background-color: #a40a0a;
    width: 830px;
    height: 36px;
    position: relative;
    top: 39px;
    left: 172px;
}
#menu > ul {
    list-style-type: none;
}
#menu ul li {
    font-family: Arial, Helvatica, Verdana;
    float: left;
}
#menu ul li > a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    line-height: 36px;
    width: 166px;
    text-align: center;
}
#menu ul li > a:hover {
    background-color: #d74343;
    border-bottom: 2px solid #bc1515;
    line-height: 34px;
}
#menu ul li > a:active {
    background-color: #a40a0a;
}

<强> Demo

修改1

我们将float放在li而不是a上，因为每个a都包含在已应用li的{{1}}中每一个。如果您考虑DOM结构，如果浮动display: block;标记，则浮动项彼此相邻，不在同一范围内。他们不是DOM兄弟姐妹。他们的父母是。所以你只是让他们的父母闲逛。现在在IE7中，如果你在一个阻塞元素之后浮动，那么浮动的项目将被推下，就像你的情况一样。所以我们应该做的是浮动a项目。

Here is a demo其中li标记已浮动，我在a标记周围放置了边框以显示正在发生的事情。在IE7中查看。

这是一个正确的水平菜单技术吗？

1 个答案: