[SOLUCIONADO] menu horizontal con efecto hover

[Bugger]

hola
mi duda es la siguiente
tengo el siguiente menu:

Código HTML:

<div id="menucontainer">      
        <ul id="menu">
            <li><a href="http://www.forosdelweb.com/f53/menu-horizontal-con-efecto-hover-1075455/...">1</a></li>  
            <li><a href="http://www.forosdelweb.com/f53/menu-horizontal-con-efecto-hover-1075455/...">2</a></li>                   
            <li><a href="http://www.forosdelweb.com/f53/menu-horizontal-con-efecto-hover-1075455/...">3</a></li>                                                    
            <li><a href="http://www.forosdelweb.com/f53/menu-horizontal-con-efecto-hover-1075455/...">4</a></li>  
        </ul>
    </div> 

y el siguiente CSS:

Código:

#menucontainer
{
    display: block;
    float: left;
    width: 100%;
    background-color: #00417C;
}
ul#menu
{
    display: block;
    padding: 0px 0px 0px 10px;
}
ul#menu li
{
    display: inline;
    padding: 3px;
    margin: 0 !important;
}
ul#menu li a
{
  color: #ffffff;
  font: 13px Tahoma, Arial, sans-serif;
  letter-spacing: 1px;
  text-decoration: none;
}
ul#menu li:hover 
{
 background-color: #ffffff;
}

el menú no es nada más que un barra horizontal que ocupa todo el ancho de la web con un color de fondo distinto y varios links en ella, que cuando pasas por encima de ellos se 'iluminan'.
el problema lo tengo en que solo se 'ilumina' lo que seria el elemento 'li', que ya es correcto, pero me gustaría que el efecto ocupara todo el alto de distinto color que tiene de fondo el div menucontainer.
en donde me estoy equivocando?

saludos y gracias de antemano

[pzin]

Pues deberías de aplicar el relleno inferior de ul#menu a los elementos de la lista en principio:

Código CSS:

ul#menu {
  padding: 0px 0px 0px 10px; /* quitar */
}
 
ul#menu li {
  padding-bottom: 13px; /* añadir */
}
 

[Bugger]

gracias por la ayuda pzin

funciona perfecto!