[SOLUCIONADO] Menú desplegable

lllmozartinlll · #1 (**permalink**) 05/03/2013, 12:56

Código HTML:

 
<head>
 
<title>Menú desplegable</title>
 
 
</head>
 
<body>
<h1>¿Cómo inserto un menú desplegable en una página Web?</h1>
 
<p>Bueno amigos, aquí os presento mí duda</p>
<p>Todavía no tengo conocimientos de JavaScript por lo que tiene que ser con html o xhtml 1.1 y CSS</p>
 
<p>Saludos cordiales,</p>
<p>lllmozartinlll</p>
 
 
 
 
</body>

fbugian · #2 (**permalink**) 06/03/2013, 08:04

Buenas, acá tenés la explicación y ejemplos en CSS para el menú desplegable.

http://vagabundia.blogspot.com/2012/05/simple-menu-desplegable-con-css.html

Saludos

lllmozartinlll · #3 (**permalink**) 06/03/2013, 13:26

Hola fbugian,

Busco algo más sencillo de entender, te explico:
Estoy estudiando y cómo verás no he llegado a esos conocimientos en CSS, cómo quieres que le aplique estilos CSS3?
De momento voy por el Tema 3 que es Cómo funcionan las hojas de estilo en cascada y además lo complemento con video2brain.
El HTML lo comprendo bastante bien.
Desde luego has dado en el clavo porque quiero un menú desplegable de forma horizontal.
Aunque amigo fbugian necesito algo más sencillo y claro de entender. Si me lo pudieses ofrecer te estaría agradecido y te lo digo de verdad porque tengo una web que todavía no le he puesto enlaces locales por el mero hecho de no saber hacer un menú.

Gracias por tú respuesta.

Saludos cordiales,

lllmozartinlll

DisenoWebWordpress · #4 (**permalink**) 06/03/2013, 13:46

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:

Ver original<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:

Ver originalul 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!

hlara88 · #5 (**permalink**) 06/03/2013, 13:59

Te dejo este link, a mi me sirvió bastante! espero te sea de ayuda

http://web.tursos.com/tutoriales/html-css/como-hacer-un-menu-desplegable-multinivel-usando-solo-css

Saludos

lllmozartinlll · #6 (**permalink**) 06/03/2013, 15:23

Gracias a todos,
DisenoWebWordpress me lo has puesto como quería, muchas gracias de nuevo a los que han participado.

Saludos cordiales,

lllmozartinlll

seoista · #7 (**permalink**) 07/03/2013, 02:26

MENÚS DESPLEGABLES 100% CSS.

Saludos.