Menú desplegable

[DisenoWebWordpress]

Buenas lllmozartinlll, te voy a poner un breve ejemplo que hice en 5 minutos y te explico un poco, para que vayas entendiendo como funciona.

El codigo html seria este:

Código HTML:

<ul>
        <li class="desplegable">
            Ejemplo1
            <ul>
                <li>SubEjemplo1</li>
                <li>SubEjemplo1</li>
            </ul>
        </li>
        <li>Ejemplo2</li>
        <li>Ejemplo3</li>
        <li>Ejemplo4</li>
        <li>Ejemplo5</li>
    </ul>
 

Vemos que es una lista simple, peero, en el primer LI tenemos dentro otra lista, que posteriormente la vamos a ocultar con CSS de momento... Este es el codigo CSS:

Código CSS:

ul li{
          float:left; 
          list-style:none;
          margin-right:20px;
      }
      ul li ul{
          display:none;
      }
      
      ul .desplegable:hover ul{
          display:inline;
          position:absolute;
          top:40px;
          left:40px
          background-color:red;
      }
 

Como vemos, le damos estilos a los primeros LI, con un float:left; para que se pongan en linea, un list-style:none; para que no salga el estilo de la lista y un margin-right:20px; para que no se junten demasiado.

Luego, le estamos diciendo, que a los UL que esten dentro del primer UL LI los oculte con display:none;.

Y por ultimo, le decimos que cuando el LI con la clase "desplegable" le hagan hover, osea el ratón pase por encima, el UL que esté dentro se muestre con display:inline;, con un position:absolute; para que nos salga abajo, y el top, el left y el background ya a tu gusto...

Cabe decir que dentro de los LI puedes poner lo que quieras, enlaces o lo que sea.

Con esto creo que ya puedes empezar a investigar.

Un saludo!