CSS Menu freaks out with mouse over

Hello,

The CSS code I am using is below. When I mouse over the buttons it makes it freak out and changes the order of the buttons in Fire Fox. How do I make it look how it does, but not freak out with the mouse overs? Thanks.

Link to site: http://www.getafreeappleiphone.com/testmh.php

<style type="text/css">	
 #nav-menu ul
{
list-style: none;
padding: 0;
margin: 0 0.15em;
}

#nav-menu li
{
float: left;
margin: 0 0.15em;
padding: 0.2ex
}

#nav-menu li a
{
background: url(/images/background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

#nav-menu li a:hover
{
background: grey;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

#nav-menu
{
width:40em
}			
</style>

Code (markup):

 

Remove the float: left; from the hover state and it's fixed.

By having that really your doubling the floats. float: left; float: left;

 

Thanks for the quick answer. So I am now trying to place this inside of a table. On my site it looks messed up, but if I put the code into a blank html file and look at it, it looks great. First thing, how do I center the whole thing to the middle of the page? Second, the color in the cell that says Members Home should be orange, and it appears that way in the bla html file, but its black here on my site. Third, the buttons rows are broken and they are in the wrong order. Any tips? Code is below, thanks.

<style type="text/css">	
 #nav-menu ul
{
list-style: none;
padding: 0;
margin: 0 0.15em;
}

#nav-menu li
{
float: left;
margin: 0 0.15em;
padding: 0.2ex
}

#nav-menu li a
{
background: url(/images/background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

#nav-menu li a:hover
{
background: grey;
height: 2em;
line-height: 2em;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

#nav-menu
{
width:40em
}		
</style>

<style type="text/css">
table.alerts
{ text-align: center;
font-family: Verdana;
font-weight: normal;
font-size: 11px;
color: #404040;
width: 600px;
background-color: #fafafa;
border: 1px #d79900 solid;
border-collapse: collapse;
border-spacing: 0px;}


.alertHd
{ border-bottom: 2px solid #d79900;
background-color: #FF9900;
text-align: center;
font-family: Verdana;
font-weight: bold;
font-size: 11px;
color: #404040;}

.alertBod p
{ text-align: left;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 11px;
line-height: 12px;
color: #404040;
background-color: #FF9900;
text-indent: -8px;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;}	
</style>
{/literal}

 <table summary="Standard alerts box" class="alerts" cellspacing="0">
<tr>
<td class="alertHd"><b>Members Home</b></td>
</tr>
<tr>
<td class="alertBod">
<center><div id="nav-menu">
<ul>
<li><a href="http://www.getafreeappleiphone.com/membershome.php">Members Home</a></li>
<li><a href="http://www.getafreeappleiphone.com/members/editAccount.php">Edit Account</a></li>
<li><a href="http://www.getafreeappleiphone.com/members/balance.php">Account Balance</a></li>
<li><a href="http://www.getafreeappleiphone.com/members/signupPTS.php">Complete Offers</a></li>
</ul>
<ul>
<li><a href="http://www.getafreeappleiphone.com/members/downline.php">Your Referrals</a></li>
<li><a href="http://www.getafreeappleiphone.com/members/refer.php">Refer a Member</a></li>
<li><a href="http://www.getafreeappleiphone.com/members/ticket.php">Support Ticket</a></li>
<li><a href="http://www.getafreeappleiphone.com/members/withdraw.php">Withdraw</a></li>
</ul>
<ul>
<li><a href="http://www.getafreeappleiphone.com/vidfaq.php">Video Tutorials</a></li>
<li><a href="http://www.getafreeappleiphone.com/members/pts/contest.php">Offer Contest</a></li>
<li><a href="http://www.getafreeappleiphone.com//members/refContest.php">Referral Contest</a></li>
<li><a href="http://www.getafreeappleiphone.com/picfaq.php">How To Guide</a></li>
</ul>
<ul>
<li><a href="http://www.getafreeappleiphone.com/last10.php">Last 10 to Credit</a></li>
<li><a href="http://www.getafreeappleiphone.com/members/advertise.php">Advertise</a></li>
<li><a href="http://www.getafreeappleiphone.com/members/stats.php">Advertising Stats</a></li>
<li><a href="http://www.getafreeappleiphone.com/members/upgrade.php">Upgrade</a></li>
</ul>
</div>
</center>
</td>
</tr>
</table>

Code (markup):

 

Okay, I got the alignment of the table on the page figured out, but the menu rows and columns are still messed up and I cant get the color to stick.