Linea bajo el menú de DIVI al pasar el ratón

Mar 31, 2017 | CSS, Diseño, DIVI (Elegant Themes), Tutoriales

En este pequeño tutorial vamos a aprender como colocar una linea base a las secciones de los menús al pasar el ratón.

En primer lugar deberemos asignarle un color y un grosor de borde inferior a los «li» que componen el menú principal. Para ello utilizaremos el siguiente CSS:

#top-menu > li { border-bottom: 5px solid white; }

El grosor y el color se pueden modificar según las necesidades. En este caso he usado el color white ya que mi fondo es blanco, pero se puede sustituir por el color de fondo de vuestro menú.

menu sin hover

Una vez realizado este paso colocaremos la siguiente linea CSS.

#top-menu >li:hover { border-bottom: 5px solid orange; }

En este caso solo debemos modificar el color de la línea, ya que si modificamos el grosor, el menú comenzará a hacer movimientos extraños debido a los constantes cambios de grosor del borde.

 

Menú con línea

Con estas dos sencillas líneas de código CSS le podrás dar un toque más de dinamismo al menú de DIVI.

Espero os haya sido de utilidad.

 

Share This
A %d blogueros les gusta esto: