0

me acabo de registrar, espero que puedan resolver mi duda. Me sucede que eh utilizado el estilo "hover" en CSS, cuando paso el mouse por encima de los elementos en mi barra de navegación, me aparece el estilo desordenado, osea cuando paso por encima de por ejemplo: "Contacto", me lo toma bien al estilo, anda normal. Pero cuando paso por encima de "Inicio", me aparece el estilo por encima de ese elemento, me aparta el estilo del elemento.

El código es el siguiente: CODIGO DE HTML:

<nav class="menu">
      
       <ul>
      <figure id="logo"><img src="./Multimedia/LogoPorEllos.jpg" alt="Logo" height="70px"</figure>
            <li><a href="./index.html"></a> Inicio</li> 
            <li><a href="./Pages/productos.html"></a> Productos</li>
            <li><a href="./Pages/sucursales.html"></a> Sucursales</li>
            <li><a href="./Pages/quienes-somos.html"></a> Quienes Somos</li> 
            <li><a href="./Pages/Contacto.html">Contacto</a></li> 
       </ul>  
       </nav>    


CODIGO DE CSS:

.menu ul li a:hover{
color: black;
background: white;
padding-left:50px;
}     `

Espero haberme expresado bien. Muchas gracias!!

1 respuesta 1

2

Para empezar todos tus enlaces menos Contacto, tienen el texto fuera de las etiquetas <a></a>. Luego, te sugiero que el logo, lo saques de en medio de la lista <ul></ul> El efecto ya funciona luego de estos cambios, le agrega un padding a cada elemento <li></li> de 50px a la izquierda, por eso la apariencia de moverse a la derecha.

Por último, pero muchas veces preguntado por acá, estás aplicado el hover solo al texto en el enlace <a></a>, y generalmente en un menú se le aplica a todo el elemento de lista <li></li>. De otro modo solo te dará efecto, cuando pases por encima del texto.

Quedaría así:

.menu ul li:hover{
color: black;
background: white;
padding-left:50px;
}
<nav class="menu">
  <figure id="logo"><img src="./Multimedia/LogoPorEllos.jpg" alt="Logo" height="70px"</figure> 
    <ul>
      <li><a href="./index.html">Inicio</a> </li> 
      <li><a href="./Pages/productos.html">Productos</a> </li>
      <li><a href="./Pages/sucursales.html">Sucursales</a> </li>
      <li><a href="./Pages/quienes-somos.html">Quienes Somos</a> </li> 
      <li><a href="./Pages/Contacto.html">Contacto</a></li> 
    </ul>  
</nav>

4
  • Joya, me sirvió. Ahora me sucede que cuando paso el mouse por encima de la barra, me tapa los elementos con el "hover". Osea se ven lo elementos, pero cuando les paso por encima me los tapa con el color blanco. Espero puedas ayudarme
    – binthc
    el 25 abr. 2022 a las 11:42
  • Seguro tienes más CSS por ahi, tienes un fondo?
    – DEVX75
    el 25 abr. 2022 a las 17:49
  • .menu{ width: 80vw; background: #000000; color: rgb(255, 255, 255); margin-left: auto; margin-right: auto; font-size: 22px; float: bottom; border: white 2px solid; } .menu ul{ list-style: none; text-align: center; } .menu ul li{ display: inline-block; padding-left:50px; } .menu ul li a{ display: block; padding: 15px; text-align: none; color: white; } .menu ul li:hover{ color: black; background: white; padding-left:50px; }. No se me ocurrio otra idea para pasarte el css
    – binthc
    el 25 abr. 2022 a las 22:30
  • @binthc Podías editar la pregunta y agregarlo ahí. Los comentarios no son para pasar código. el 25 abr. 2022 a las 23:37

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.