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

cuando lo subas nos avisas para verlo

:wink: :wink: :wink:

saludos

Algun dia sabras más que nosotros, y espero que nos enseñes cosas ese dia!

Un abrazo!