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

我的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/这里是链接

来源

2012-11-24 gulada

你的HTML标记在哪里？更好 - 创建一个[JSFididle]（http://jsfiddle.net/）演示，以便人们可以查看它并在 –

'font-family：Arial Helvatica Verdana;' - 应该用逗号分隔。 –

我想锚是LI元素的唯一的孩子。在这种情况下，不要浮动锚点，在锚点上设置display：block可以完成工作。 –

你需要把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在th e li而不是a，因为每个a被包装在li中，其中display: block;被应用于每个。如果你想到DOM结构，如果你浮动a标签，你浮动的项目是彼此相邻的，它们不在同一个范围内。他们不是DOM兄弟姐妹。他们的父母是。所以你只是把他们的父母留在身边。现在在IE7中，如果你在一个阻塞元素之后浮动，那么浮动的元素将被压下，就像你的情况一样。所以我们应该做的是漂浮li项目。

Here is a demo其中a标签是浮动的，而且我已经把周围的边框li标签显示是怎么回事。在IE7中检查它。

来源

2012-11-24 23:15:42 3dgoo

最新的区别是什么？ – gulada

我已经更新了答案，试图解释发生了什么。试。 – 3dgoo

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

回答

相关问题