Trying to find why these floated LIs don't align in IE7

Question

Here is the page in question: [redacted]

The menu looks great in Firefox, Safari, Chrome, and IE8+. But in IE7, the LIs are stacked vertically. You can download IETester if you don't already have it to see what I mean.

Here's my HTML:

<ul id="menu">
    <li class="you"><a href="">You</a></li>
    <li class="us"><a href="">Us</a></li>
    <li class="contact"><a href="">Contact</a></li>
    <li class="insurance"><a href="">Insurance</a></li>
    <li class="services"><a href="">Services</a></li>
    <li class="blog"><a href="">Blog</a></li>
</ul>

And the corresponding CSS:

#header #menu {
    position: absolute;
    bottom: 40px;
    right: 22px;
    float: right;
}

#menu,
#menu li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}


#menu li {
    float: left;
}

#menu a {
    display: block;
    float: right;
    width: 76px;
    height: 25px;
    padding: 45px 0 5px 0;
    text-align: center;
    text-decoration: none;
    color: #555;
    font-size: 90%;
    border: 1px solid #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#menu .you a {
    background: url(img/icon_you.gif) center 9px no-repeat;
}

#menu .blog a {
    background: url(img/icon_blog.gif) center 9px no-repeat;
}

#menu .us a {
    background: url(img/icon_us.gif) center 9px no-repeat;
}

#menu .insurance a {
    background: url(img/icon_insurance.gif) center 9px no-repeat;
}

#menu .contact a {
    background: url(img/icon_contact.gif) center 9px no-repeat;
}

#menu .services a {
    background: url(img/icon_services.gif) center 9px no-repeat;
}

#menu a:hover {
    background-color: #f6f5f3;
    border: 1px solid #e5e2dd;
    color: #2871ad;
}

Any insights greatly appreciated.

Answer 1

为每个li元素定义一个宽度。

Answer 2

Don't float your A -tags. You're already floating the LI wrapper. Also, don't forget to clear your floats at the end of your list.