2

Estoy intentando crear un menú al que al pasar el ratón por alguno de los botones aparezca un menú desplegable. El problema es que no consigo centrar el menú desplegable con el botón que lo activa:

<html>
  <head>
    
  </head>
  <body>
    <ul class="menu">
      <li class="btn">Menu1
        <ul class="sublista">
        <li><a href="#" class="content">hola1</a></li>
        <li><a href="#" class="content">hola11</a></li>
        <li><a href="#" class="content">hola111</a></li>
        <li><a href="#" class="content">hola1111</a></li>
          </ul>
      </li>
      <li class="btn">Menu2
      <a href="#" class="content">hola2</a>
      </li>
      <li class="btn">Menu3
      <a href="#" class="content">hola3</a></li>
      
    </ul>
  </body>
</html>

CSS

.menu{
  list-style: none;
  display: flex;
  justify-content:space-around;
}
.content{
  display: none;
  position: absolute;
  min-width: 5%;
  
  padding: 10px 10px 10px 10px;
  background-color: #00216a;
  color:white;
  
  
  border-radius: 2px;
  
}
.btn:hover .content{
  display: block;
}
.sublista{
  list-style: none;
  padding-top: 0;
}
.sublista li{
  padding: 19px 0 20px 0;
  
  justify-content: left;
}

Queda así: introducir la descripción de la imagen aquí

Y me gustaría centrarlo y a ser posible pero no me importa mucho, añadir un efecto de transición a la hora de desplegar el menú, que no se muestre todo al mismo segundo.

Gracias!

1 respuesta 1

1

El user agent añade por defecto a los <ul> la propiedad padding-inline-start: 40px;. Lo único que tendrías que hacer es ponerla a 0 en tus elementos .sublista.

.menu{
  list-style: none;
  display: flex;
  justify-content:space-around;
}
.content{
  display: none;
  position: absolute;
  min-width: 5%;
  
  padding: 10px 10px 10px 10px;
  background-color: #00216a;
  color:white;
  
  
  border-radius: 2px;
  
}
.btn:hover .content{
  display: block;
}
.sublista{
  list-style: none;
  padding-top: 0;
  padding-inline-start: 0px;
}
.sublista li{
  padding: 19px 0 20px 0;
  
  justify-content: left;
}
<html>
  <head>
    
  </head>
  <body>
    <ul class="menu">
      <li class="btn">Menu1
        <ul class="sublista">
        <li><a href="#" class="content">hola1</a></li>
        <li><a href="#" class="content">hola11</a></li>
        <li><a href="#" class="content">hola111</a></li>
        <li><a href="#" class="content">hola1111</a></li>
          </ul>
      </li>
      <li class="btn">Menu2
      <a href="#" class="content">hola2</a>
      </li>
      <li class="btn">Menu3
      <a href="#" class="content">hola3</a></li>
      
    </ul>
  </body>
</html>

Hay que tener en cuenta que los navegadores otorgan estilos por defecto a la mayoría de sus elementos, que dependen de cada navegador.

Referencia: Estilos por defecto CSS

1
  • Muchas gracias!!! Era exactamente eso lo que estaba buscando Commented el 3 mar. 2021 a las 9:25

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.