[HTML – CSS] Menu desplegable usando HTML y CSS

Para hacer un Menú desplegable, lo primero que se nos viene a la cabeza es, usar una solución basada en la combinación de HTML, CSS y Javascript, lo cual casi siempre nos resuelve nuestros problemas.

Sin embargo yo hace tiempo pensé en que tal vez se podría hacer sin tener que usar Javascript(Claro sin efectos :( ), y teniendo esto en mente me dispuse a buscar una solución para esto.

Y la encontré la solución, no recuerdo bien donde (Si logro encontrar el recurso podre el link), insisto no es mío este tip, pero me pareció útil compartirlo, y claro tiene una ventaja muy grande, la cual es, que es muy fácil de configurar y de usar.

Primero que nada necesitaremos una lista, la cual estará integrada así.

La lista principal será el menú, las listas de segundo nivel serán los submenus que estarán ocultos y puede contener hasta un tercer nivel, y se desplegaran de la siguiente forma, menú principal en horizontal, submenu segundo nivel vertical (oculto), submenu tercer nivel derecha.

La único que necesitara nuestra lista  es un id y con eso nos será suficiente.

01<ul id="navmenu-h">
02 <li>
03 <a href="/">Inicio</a> <!-- Este es un uno de los menus -->
04 </li>
05 <li>
06 <a href="/servicios">Servicios</a>
07 <ul>              <!-- Esta es la lista del submenu, los li son los submenus -->
08 <li>            <!-- Este es un uno de los submenus -->
09 <a href="/noticias">Noticias</a>
10 </li>
11 </ul>
12 </li>
13 <li>
14 <a href="/ventas">Ventas</a>
15 <ul>
16 <li>            <!-- Este es un uno de los submenus -->
17 <a href="/reportes">Reportes</a>
18 </li>
19 <li>
20 <a href="/categoria">categoria</a>
21 <ul>              <!-- Esta es la lista del submenu 3er Nivel, los li son los submenus -->
22 <li>            <!-- Este es un uno de los submenus3 Nivel -->
23 <a href="/sucursal1">Surcursal 1</a>
24 </li>
25 <li>            <!-- Este es un uno de los submenus3 Nivel -->
26 <a href="/sucursal2">Surcursal 2</a>
27 </li>
28 <li>            <!-- Este es un uno de los submenus3 Nivel -->
29 <a href="/sucursal3">Surcursal 3</a>
30 </li>
31 </ul>
32 </li>
33 </ul>
34 </li>
35</ul>

Y ha dicha lista agregaremos el siguiente css  Seguir leyendo [HTML – CSS] Menu desplegable usando HTML y CSS

Leave a Comment

Your email address will not be published. Required fields are marked *