Avisos
Vaciar todo

[Resuelto] Subrayar opción menú on hover  

 
Gabriel
 Gabriel
Estimable Member

Hola,

He estado buscando la forma para poder mostrar un subrayado en la opción on hover activa del menú principal. He encontrado esta web: https://divesp.com/codigos-personalizar-menu-divi/ y ahí el código siguiente pero no consigo que funcione, no hace nada.

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
right: 0;
}
#top-menu li a:before {
content: "";
position: absolute;
z-index: -2;
left: 0;
right: 100%;
bottom: 50%;
background: #15bf86; /*** COLOR DE LA LINEA INFERIOR ***/
height: 3px; /*** GROSOR DE LA LINEA INFERIOR ***/
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#top-menu li a:hover {
opacity: 1 !important;
}
#top-menu li a:hover:before {
right: 0;
}
#top-menu li li a:before {
bottom: 10%;
}

El menú principal lo muestro en todas las páginas y está en el encabezado global hecho con Generador de Temas de Divi. Por favor, ¿sería posible que me indicarais cómo puedo hacer para mostrar un subrayado sobre la opción activa del menú principal on hover? Gracias

Contenido solo visible a usuarios registrados

Respondido : 07/12/2020 7:21 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Prueba con el siguiente código CSS:

#menu-menu-principal{
margin-top: 40px;
}

#menu-menu-principal a:hover{
border-bottom: 2px solid red;
}

#menu-menu-principal a{
max-height: 20px;
}

Refresca tu navegador para ver los cambios.

Saludos.

Respondido : 07/12/2020 7:43 pm
Gabriel
 Gabriel
Estimable Member

@jmarreros Perfecto, como siempre. Muchísimas gracias!

Respondido : 07/12/2020 8:56 pm