Question

My CSS is:

#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;
}

This menu does not look right ie7 and belows. If this is wrong, please tell me the right, thanks.

http://jsfiddle.net/a4Qe3/ here is the link

Answer 1

You need to put float on the li instead of the a. This is bacause the li will block each time.

Here is the the updated code:

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

Edit 1

We put the float on the li instead of the a because each a is wrapped in a li which has display: block; applied to each. If you think of the DOM structure, if you float the a tags you are floating items next to each other, that are not in the same scope. They are not DOM siblings. Their parents are. So you are just leaving their parents hanging around. Now in IE7, if you float after a blocking element, that floated item will be pushed down, as was happening in your case. So what we should do is float the li items.

Here is a demo where the a tags are floated, and I have put a border around the li tags to show what is going on. Check it in IE7.