CSS Navbar error?

[VaMoose]

I have my navbar, but the links are showing up in reverse order, ie: not Home, About Us, Gallery, Contact Us. it is Contact Us, Gallery, About Us, Home.

my css code:
.navbar ul li{
display:inline-block;
margin-left:10px;
margin-right:10px;
background-image:url(button.png);
background-repeat:no-repeat;
height:40px;
width:100px;
text-align:center;
padding-top:10px;
float:right;
text-decoration:none;
list-style:none;
}


my html code:
<div class="navbar">
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>About Us</li></a>
<a href="#"><li>Gallery</li></a>
<a href="#"><li>Contact Us</li></a>
</ul>
</div>

Any one know what the hell is going on?

[JT Web Design]

Hi VaMoose,

You need to float the links to the left not the menu itself but the links inside the menu, try this -

.navbar li a{
float:left;
}

[fireplace_tea]

Instead of floating right, float them left. Here is the coding:

.navbar ul li{
display:inline-block;
margin-left:10px;
margin-right:10px;
background-image:url(button.png);
background-repeat:no-repeat;
height:40px;
width:100px;
text-align:center;
padding-top:10px;
float:left;
text-decoration:none;
list-style:none;
}

Notice, I changed float:right to float: left and that fixed it.