Hilfe bei Listen-Navi

[Glauschi]

Also ich machs kurz.. Ich hab wenig Ahnung von CSS, und hab ein Problem mit einer Seite die ich gerade erstelle:

So sollts aussehen: http://www.glauschi.de/neu/sosollsein.gif

und so siehts aus http://www.glauschi.de/neu/

HTML:

<div>
<ul>
<li><a>Home</a></li>
<li><a>Über uns</a></li>
<li><a>Messetermine</a></li>
<li><a>Kontakt</a></li>
<li><a>Produkte</a></li>
<li><a>Onlineshop</a></li>
<li><a>Downloads</a></li>
<li><a>Händler</a></li>
<li><a>Partner</a></li>
<li><a>Impressum</a></li>
</ul>
</div>

CSS:

#navi {
width: 978px;
margin: auto;
border-left: 5px solid #ffffff;
border-right: 5px solid #ffffff;
padding: 0;
background-color: #e0671e;
}

#navi li {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}




#navi li a{
text-decoration: none;
background-color: #000000;
color: #ffffff;
margin: 0;
padding: 0 15px;
border-right: 1px solid #ffffff;
border-bottom: 2px solid #e0671e;

}


#navi li a:hover
{
background-color: #e0671e;
}