Menu desplegable

Wenas, ¿¿alguien sabe como se puede poner un menu desplegable para el menu horizontal de una forma sencilla??
Por favor, respondan :wink:
pueees... yo te puedo decir como esta hecha la mia.. que su trabajo tubo...

te dejolos codigos aqui, los pruebas y si ves que algo no te sale, nos cuentas


en la hoja de estilos:



#navegacion ul { /* all lists */
padding: 0px;
margin: 0px;
list-style: none;
text-align:left
}

#navegacion li { /* all list items */
float: left;
position: relative;
width:5em;
list-style: none;

}

#navegacion li.somos { /* all list items */
float: left;
position: relative;
width:8em;
list-style:none;

}

li ul { /* second-level lists */
display: none;
position: absolute;
top: 1.2em;
left: 0;
float:left;
list-style:none;
width:8.5em;
background-color:#32CD32
}

#navegacion li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
float:left
list-style:none;
}

#navegacion li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
float:left;
list-style:none;
}

#content {
clear: left;
float:left;
list-style:none
}







HTML


<div id="navegacion">
<ul id="nav">


<li class="somos">¿Quienes somos?
<ul><div id="caja">
  • ·Ramas

  • ·NuestrasPañoletas

  • ·Jefes

  • ·Estructurainterna

  • ·<a href="quienes-somos-asociaciones.html">Asociacionesalas
    quepertenecemos</a>

    </div>



  • BLOG

  • Fotos

  • Manual
    <ul>
  • ·Orientación

  • ·Andarenelmonte

  • ·Botánica

  • ·Nudosyamarres

  • ·Herramientas

  • ·Astronomía




    <li class="somos">Cancionero

    <ul>

  • ·CancioneroA

  • ·CancioneroB

  • ·CancioneroC

  • ·Acordesdeguitarra




  • Foro

  • Enlaces
    <ul>
  • ·OtrosGrupos

  • ·Transportes

  • ·Naturaleza

  • ·Canciones

  • ·Otrosenlaces





  • MÁS
    <ul>
  • ·Calendario

  • ·Música

  • ·ÁlbumB


  • ·MÁS




    </div>





    Personalizalo por favor cuando lo domines para que no parezcan iguales vale?

    saludos
  • hola Mikel L, perdona mi ignorancia, pero para personalizar la mia, imagino que debere cambiar los datos
  • , pero, ahi viene mi pregunta de supernovato, :oops: para que se me "despliegue" y salaga el otro enlace debo hacer otra pagina aparte? no se si me explico, es que todavia no se los terminos :roll: .

    MERCI

    salu2
  • Hola Roma!

    No, no es necesario, va todo en la misma página de este modo.

    Imagina que quieres un menu con cuatro secciones principales, pues pones esto:

    <div id="navegacion">
    <ul>
  • seccion 1
  • seccion 2
  • seccion 3
  • seccion 4

    </div>

    Ahora imagina que en dentro de la sección 2 quieres que surjan (se abran) dos sub-secciones. En ese caso tienes que crear una nueva lista dentro del li anterior correspondiente. La nueva lista sería algo así:
    <ul>
  • sub-seccion 2.1
  • sub-seccion 2.2
  • sub-seccion 2.3
  • sub-seccion 2.4


    Eso es lo que tienes que insertar dentro del li correspondiente a la seccion 2 del primer bloque de codigo de este mensaje, quedando ya insertado de este modo:
    <div id="navegacion">
    <ul>
  • seccion 1
  • seccion 2
    <ul>
  • sub-seccion 2.1
  • sub-seccion 2.2
  • sub-seccion 2.3
  • sub-seccion 2.4


  • seccion 3
  • seccion 4

    </div>

    Es decir, antes de cerrar el li de la sección con la etiqueta
  • , incluyes el codigo de otra lista y como es una lista dentro de otra, aparece como si fuera una subsección.

    Recuerda que en lugar de # has de colocar la ruta del enlace que quieras y que puedes usar estilos css para darle un toque personal a los elementos de ese menú.

    Ah, la Hoja de estilo quedaría con estos estilos definidos:

    #navegacion ul
    {
    padding: 0px;
    margin: 0px;
    list-style: none;
    text-align:left
    }

    #navegacion li
    {
    float: left;
    position: relative;
    width:5em;
    list-style: none;
    }

    li ul /* estilos para el segundo nivel o subsecciones*/
    {
    display: none;
    position: absolute;
    top: 1.2em;
    left: 0;
    float:left;
    list-style:none;
    width:8.5em;
    background-color:#32CD32
    }

    #navegacion li>ul
    {
    top: auto;
    left: auto;
    float:left
    list-style:none;
    }

    #navegacion li:hover ul, li.over ul
    {
    display: block;
    float:left;
    list-style:none;
    }

    Dinos si lo consigues o si no, oki?
  • hola jorgens, lo he probado, aunque no tengo nada en las secciones(estoy probando), una preguntita, se debe colgar para ver el resultado o simplemente con preview se deberia ver?, es que me sale la pantallita de internet explorer. no se.
    :roll:
    MERCI
    salu2
    hola jorgens, he hecho lo que me has dicho, y no me va :cry: :cry:

    he puesto esto:
    <div id="navegacion">
    <ul>
  • quien soy
    <li class="escuchar musica">musica
  • juegos
    <ul>
  • ahorcado
  • buscaminas


  • videos

    </div>

    creo que esta igual, no?

    gracias por vuestra paciencia.

    MERCI
    salu2
  • Hola

    Creo que falta algo

    ienes que poner esto:

    entre <head> y </head>


    <script type="text/javascript"><![CDATA[//><!--
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes;
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace("over", "");
    }
    }
    }
    }
    }
    window.onload=startList;

    //--><!]]>
    </script>


    y el primer ul debe ser asi:

    <ul id="nav">


    saludos
    :lol: :lol: :lol: oooooooleeeeeeeeeee.

    llevo varios dias intentandolo, mirando un sitio y otro, probando, borrando etc etc. ya iba a abandonar y zasssssss, la formula magica.

    graaaaaaaaaacias. ya esta, perfecto. :D

    "alguna vez sabre una milesima parte de lo que sabes"?

    lo dicho, gracias a ti en particular y a todos en general.

    MERCI
    salu2