Having Navigation Problems

Having Navigation Problems

I was wondering if someone would be able to help me with my messed-up nav
bar. Here's a pic of what it should look like:
http://i.imgur.com/1WQ07Mu.png But on some browsers, it looks odd and cuts
off like this: http://i.imgur.com/FSgYkvS.png
Here's my HTML:
<ul id="menu" class="red">
<li class="active"><aref="index.html">Home</a>/li>
<li><a href="projects.html">Projects</a></li>
<li><a href="http://TechnoToast.com/">Blog</a></li>
<li><a href="status.html">Status</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
Here's my CSS:
#menu {
font-family:"Century Gothic", Arial, sans-serif;
text-transform:uppercase;
list-style-type:none;
font-size:1em;
background:#eee;
height:40px;
border-top:2px solid #eee;
border-left:2px solid #eee;
border-bottom:2px solid #ccc;
border-right:2px solid #ccc;
margin-bottom:5px;
}
#menu li {
float:left;
margin:0;
}
#menu li a {
text-decoration:none;
display:block;
padding:0 40.8px;
line-height:40px;
color:#666;
}
#menu li a:hover, #menu li.active a {
background-color:#f5f5f5;
border-bottom:2px solid #DDD;
color:#999;
}
#menu.red {
border-top:2px solid #660000;
border-left:2px solid #660000;
border-bottom:2px solid #450000;
border-right:2px solid #450000;
background:#850301;}
#menu.red a {color: #fff;}
#menu.red li a:hover, #menu.red li.active a {color: #F27F84; background:
#990000; border-bottom: 2px solid #660000;}
/*navbar end*/
I really appreciate anyone who could help me out. :)