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

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">You</li>
<li class="us">Us</li>
<li class="contact">Contact</li>
<li class="insurance">Insurance</li>
<li class="services">Services</li>
<li class="blog">Blog</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

Define a width for each li element.

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.