Capa div superpuesta para menú

[eamanesims]

muchísimas gracias pzin!!! justo era eso ^^ claro estaba respetando el padding por defecto que dices al no quitarselo, ahora si que funciona


Pongo el código del menú y su css comentado ya que he estado revisándolo y le sobraban cosillas así mucho más facil de entender ^^ por si le sirve a alguien:

Código HTML:

<!------------------------------------MENU----------------------------->
        <div id="menu" style="z-index:100;">
             <ul>
              <li class="nivel1"><a href="URL_enlace_1"> texto_enlace_1 </a></li>
              <li class="nivel1">
                <a href="#"> texto_enlace_2 </a>
                <ul>
                  <li><a href="URL_enlace_2.1"> texto_submenú_2.1 </a></li>
                  <li><a href="URL_enlace_2.2"> texto_submenú_2.2 </a></li>
                  <li><a href="URL_enlace_2.3"> texto_submenú_2.3 </a></li>
                </ul>
              </li>
              <li class="nivel1"><a href="URL_enlace_3"> texto_enlace_3 </a></li>
            </ul>
        </div>
        <!--------------------------------FIN MENU----------------------------->
 

Código CSS:

/*-----------------DIV MENU QUE CONTIENE LA LISTA----------------*/
#menu {  
    text-align: center;
    font-size: 0.7em;
    width: 320px;
    position: relative;
    margin:0px;
}
 
/*-----------------QUITAMOS LOS PUNTITOS QUE TIENEN POR DEFECTO LAS LISTAS----------------*/
#menu ul { 
    list-style-type: none;
}
 
/*-----------------NIVEL 1, POR DEFECTO WIDTH----------------*/
#menu ul li.nivel1 { 
    width: 162px;
}
 
/*-----------------NIVEL 1, POR DEFECTO ----------------*/
#menu ul li a {
    display: block;
    text-decoration: none;
    color: #fff;
    background-color: #399;
    border: solid 1px #fff;
    border-top: none;
    padding: 8px;
    position: relative;
}
 
/*-----------------HOVER DE NIVEL 1: POSICIÓN----------------*/
#menu ul li:hover {
    position: relative;
}
 
/*-----------------HOVER DE NIVEL 1: POSICIÓN, COLOR FUENTE Y COLOR DE FONDO----------------*/
#menu ul li a:hover{ /*, #menu ul li:hover a.nivel1 */
    background-color: #6CC;
    color: #000;
    position: relative;
}
 
/*-----------------OCULTAMOS POR DEFECTO EL NIVEL 2 (PARA QUE SE MUESTRE SOLO CON HOVER DE NIVEL 1)---------------*/
#menu ul li ul {
    display: none;
}
 
/*-----------------HOVER DE NIVEL 1: ANCHURA,COLOR FUENTE Y COLOR----------------*/
#menu ul li:hover ul { /*#menu ul li a:hover ul, */
    display: block;     /* para sustituirlo por el display:none que tiene actualmente el nivel 2*/
    position: absolute; /* CLAVE PARA MOSTRAR EL NIVEL 2 CORRECTAMENTE*/
    left: 100%;         /* CLAVE PARA MOSTRAR EL NIVEL 2 CORRECTAMENTE*/
    top:0;              /* CLAVE PARA MOSTRAR EL NIVEL 2 CORRECTAMENTE*/
    padding:0;          /* CLAVE PARA MOSTRAR EL NIVEL 2 CORRECTAMENTE*/
}
/*-----------------ANCHURA,COLOR FUENTE Y COLOR DE FONDO DE LNIVEL 2----------------*/
#menu ul li ul li a {
    width: 160px;
    background-color: #6CC;
    color: #000;
}
/*-----------------HOVER DE NIVEL 2: COLOR FUENTE Y COLOR DE FONDO----------------*/
#menu ul li ul li a:hover {
    position: relative;
    background-color: #399;
    color: #FFF;
}