mi primer post en este sitio espero ser específico con la pregunta, estoy estudiando DAW y poco a poco aprendiendo conocimientos de CSS, quiero hacer un menú de navegación simple pero usando flexbox, quiero evitar el uso de float en la medida de lo posible. Tengo el siguiente código HTML (muy simplón ya os digo)
<body>
<header>
<nav class="contenedor">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
</body>
Y esta es la hoja de estilos que estoy empleando:
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.contenedor{
display: flex;
width: 100%;
justify-content: center;
background-color: black;
height: 50px;
border: solid 2px yellow;
align-items: center;
}
nav ul{
list-style: none;
display: flex;
}
nav ul li{
padding: 0px 20px;
}
nav ul li a{
text-decoration: none;
color:white;
}
nav ul li a:hover{background-color: aqua;}
</style>
No sé si he puesto bien el tema y podéis ejecutar el código para que veáis el resultado, quiero que mi hover ocupe todo el alto del contenedor nav, y no sólo ocupe el texto de los enlaces, que es lo que me está haciendo al pasar el cursor. He probado a ponerle display block a los enlaces para que actúen como elementos en bloque pero no me termina de solucionar el problema. ¿Qué se os ocurre? Un saludo