Apariencia de los submenus con CSS

por | Ene 6, 2018 | CSS, Diseño, Tutoriales, Wordpress

Como todos sabemos, DIVI anda un poco limitado a la hora de estilizar los menús en general y en especial los submenus ó menu desplegable, dando de momento solo la opción de color del fondo de dicho submenú así como el color del texto.

No podemos controlar el ancho del submenú, cuando por ejemplo el mismo contiene apartados con descripciones algo más largas de lo normal, así como la distancia en altura entre los diferentes apartados.

Esto se puede solucionar mediante algo de CSS como veremos a continuación.

He empezado por crear algunas páginas con descripciones largas para que las mismas no entren en una sola linea en el submenú. A algunos les parecerá bien, pero otros quizás prefieran que cada apartado aparezca en una sola linea. Y eso es lo que vamos a hacer.

Submenus 1 Divi Namaste Web

Todo el código que aquí se contempla habría que incluirlo en la siguiente opción de DIVI:

CSS DIVI submenus

CSS DIVI submenus

Si inspeccionamos el código, vemos que la clase que da ancho al menú desplegable es .nav li ul, por lo que está sería la regla que tendríamos que cambiar.

.nav li ul {width: 350px}

En este punto, vemos que todo sigue igual, porque lo que de verdad interesa son cambiar los li que hay dentro de esa clase .nav li ul. Procedemos a hacerlo de la siguiente manera:

#top-menu li li a {width: 320px;}

Dado que los li en realidad son enlaces, lo que estamos cambiando son todos los a (enlaces) que se encuentran dentro de los li.

Para el que no este muy puesto en CSS comprendo que esto les pueda parecer algo enrevesado.

En este punto el menú se vería de la siguiente manera:

Submenus 2 Divi Namaste Web

El tamaño dado de 350px y 320px se pueden modificar para adaptarlo a nuestras necesidades.

Otro de los puntos que echo en falta en DIVI es el color al pasar el ratón por lo alto de cada apartado. Por defecto te pone un color beige claro, que en muchas ocasiones nos interesa cambiar.

En este caso, lo podríamos cambiar con la siguiente regla:

#main-header .nav li ul a:hover {background-color: red;}

He puesto red (rojo) como ejemplo, pudiendose cambiar por el que a nosotros nos interese.

Submenus 3 Divi Namaste Web

Así es como quedaría nuestro CSS después de realizar todos los cambios.

CSS 2 DIVI submenus

Como siempre espero que os haya sido de utilidad y en tal caso compartáis y comentéis que os ha parecido.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
Share This
A %d blogueros les gusta esto: