CSS3 - Aumentar espaciado entre enlaces

[fede5426]

Iniciado por xfxstudios

ahora si quieres que todo en li sea tu enlace prueba asi:

Está mal estructurado el HTML.. "ul > li > a" es lo correcto.

Para que el enlace cubra todo el item de lista se usa display:block; y el padding aplicado al enlace y no al item de lista.

Código HTML:

<section class="enlaces"> <!-- Sección para los enlaces -->
   <ul>
      <li>Mi Hoja de Vida:
         <ul>
            <li><a href="cve.html">Mi Hoja de Vida - Español</a></li>
            <li><a href="cvi.html">Mi Hoja de Vida - Inglés</a></li>
         </ul>
      </li>
   </ul>
</section>
 

Código CSS:

.enlaces ul li ul li{
    background-color:#00437B;
    width:200px;
    margin-top:10px;
}
.enlaces ul li ul li:hover{
    background-color:#FF6E00;
}
.enlaces ul li ul a{
    color:#FFFFFF;
    text-decoration:none;
        display: block;
        padding:10px
}
 

Y no es necesario usar el mismo código en el :hover, solo lo que se quiera modificar cuando el cursor se posicione encima.

Saludos