Create Menu with css and li elements compatible for all browsers - html

Question

I am trying to create a simple menu using li elements, but it only works on IE7, in FF and Chrome, the alignment get weird.
Also the :hover and :Active only works on IE7.
Could anybody give me a hit on this?
I would really appreciate it.
CSS:
#heading{
width: 700px;
height:auto;
margin: 0 auto;
background-color:#FFFFFF;
margin-top:5px;
margin-bottom:5px;
display:block;
}
#imglogo{
float:left;
}
#barDescription{
float:right;
}
#navigation{
text-align: right;
margin-top: 70px;
}
#navigation li{
float: right;
display: block;
text-align: center;
list-style-type: none;
}
#navigation li a{
color:#A08019;
background-image: url('Images/Menu1.png');
background-repeat:repeat-x;
background-position: center center;
text-decoration:none;
font-weight:bold;
display: block;
height:25px;
vertical-align:middle;
padding-right:10px;
padding-left:10px;
}
navigation li a:hover{
color:white;
background-image: url('Images/Menu2.png');
background-repeat:repeat-x;
background-position: center center;
text-decoration:none;
font-weight:bolder;
display: block;
height:25px;
vertical-align:middle;
padding-right:10px;
padding-left:10px;
}
navigation li a:active{
color:#B39A48;
background-image: url('Images/Menu2.png');
background-repeat:repeat-x;
background-position: center center;
text-decoration:none;
font-weight:bolder;
display: block;
height:25px;
vertical-align:middle;
padding-right:10px;
padding-left:10px;
}
HTML:
<div id="heading" >
<div id="imglogo">
<img id="logo" src="Images/logo.png" alt="logo" />
</div>
<div id="barDescription">
<h4>Especialidad en tapas,vinos y menus</h4>
<h5>Restaurante de cocina creativa tradicional. Vinos y tapas</h5>
</div>
<ul id="navigation">
<li>Contacto</li>
<li>Ubicacion</li>
<li>Reservas</li>
<li>Menus</li>
<li>Local</li>
</ul>
</div>

Answer 1

Suns of Suckerfish teaches how to get there. (Example.)
edit: Now that you posted the :active and :hover CSS, I can see you're missing a # in the beggining of the rule. So it is being applied to the "navigation" tags instead of the tags with "navigation" id. Change your CSS to add the # before "navigation":
#navigation li a:hover{
/* ... */
}
#navigation li a:active{
/* ... */
}