1

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

1 respuesta 1

1

Necesito entender mejor que es lo que quieres, pero te daré un ejemplo.
Tu código me da esto:

  • Un navbar que solo tiene hover en los <a> links

introducir la descripción de la imagen aquí

EDIT con respecto al comentario:

Para lo que mencionas en tu comentario, hay que cambiar lo siguiente.
Pero lo básico es lo siguiente:

  1. Tu ul debe tener el alto del contenedor. Para ello le agregamos el height del 100%, asi obtendrá la altura del contenedor.
  2. Hay que centrar el texto de algún modo. Para ello utilizamos padding-top, y lo ajustamos. (puede que haya una mejor manera de hacer esto)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.contenedor {
  display: flex;
  width: 100%;
  justify-content: center;
  background-color: black;
  height: 50px;
  align-items: center;
}

nav ul {
  list-style: none;
  display: flex;
  height: 100%;
}

nav ul li {
  padding: 0px 20px;
  padding-top: 15px;
}

nav ul li a {
  text-decoration: none;
  color: white;
  height: 20px;
}

li:hover {
  background-color: aqua;
}
<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>

4
  • Vale fallo mío no haberme expresado bien, quiero que en efecto, ocupe todo el alto del navbar el hover, pero que solo se aplique a cada opción como si fuera un único elemento de bloque. Por ejemplo, si paso el cursor por Inicio, que cambie el background a aqua pero solo la parte de inicio. Si lo paso por Acerca de, que solo cambie la opción Acerca de.. Commented el 24 feb. 2021 a las 12:23
  • Buenas, revisa la respuesta a ver si esto si es lo que buscas.
    – Excorpion
    Commented el 24 feb. 2021 a las 12:41
  • Sí! era lo que buscaba muchas gracias, ahora bien, no entiendo por qué si tengo un justify content center y un align-item center, al ponerle el height del 100% en el nav ul (que tampoco lo termino de comprender), pierde esa "centralidad" y toca hacer un padding top al ul li de 15px. Commented el 24 feb. 2021 a las 13:17
  • No estoy seguro, te tocaría revisar, pero creo que ambos, son en horizontal. Habría que buscar la que lo hace en vertical.
    – Excorpion
    Commented el 24 feb. 2021 a las 13:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.