Submenus desplegables

elektra · 28 Oct 2007, 22:12 · Solicitar retirada

A ver si alguien me puede ayudar con la creacion de submenus, lo he estado buscando pero no he sido capaz de encontrarlo, y al final entre tanto codigo me ofusco :?
lo que necesito es que cuando pase el cursor por encima de las diferentes opciones de un menu (sin clicar), se abra un submenu desplegable donde se vean las diferentes opciones listadas, de momento tengo creados los menus y submenus con <ul>

pero no se como hacerlo en la hoja de estilos (supongo) para que se vea de esta forma

Yaneth · 29 Oct 2007, 16:27 · Solicitar retirada

Hola

Checa este post

http://www.comocreartuweb.com/phpBB2/ftopic5679.html

saludos

elektra · 7 Nov 2007, 12:14 · Solicitar retirada

Hola Yaneth!

He mirado y probado lo mismo que el post pero no me sale el desplegable...te enseño los códigos a ver si ves el fallo:

Entre “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[i]; 
if (node.nodeName=="LI") { 
node.onmouseover=function() { 
this.className+=" over"; 
} 
node.onmouseout=function() { 
this.className=this.className.replace("over", ""); 
} 
} 
} 
} 
} 
window.onload=startList; 

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

<title>DERPLAS, SL</title>
<link rel="stylesheet"href="estil-general.css"type="text/css"media="all">

Entre “body”:

			<div id="pestanya">
			<ul id="nav"> 				
					[*][url="#"]Qui som?[/url]
					<li class="prod">[url="#"]Productes[/url]
					 	<ul><div id="caja">
							[*][url="Portes.html"]Portes[/url]
							[*][url="Vidres.html"]Vidres[/url]
							[*][url="Finestres.html"]Finestres[/url] 
						</div>[/list]
					 
					[*][url="#"]Catàlegs[/url]
					[*][url="#"]Obres[/url]
						<ul>
							[*][url="#"]Ofocines TOUS[/url]
							[*][url="#"]Biblioteca de Cardona[/url]
							[*][url="#"]Oficines VIDAL[/url]
						[/list]
					
			[/list]</div>

Y en la hoja de estilos:

#pestanya		{background-color: #98FB98  ; width: 800px ; height: 30px ; overflow: hidden ;
						border: green 1px solid }
#pestanya ul{padding:0px ; margin:0px ; list-style:none ; text-align: left }						
#pestanya li{float: left ; position:relative ; font: bold 20px ;list-style:none ; 
						widht:100px ; text-decoration: none ; margin-top: 3px }
#pestanya li.prod	{float: left ; position:relative ; list-style:none; widht:100px }
li ul				{display:none ; position: absolute ; top: 30px ; left: 0 ; float: left ;
	 					list-style:none; widht:40px ; background-color: yellow}
#pestanya li>ul {top:auto ; left:auto ; float:left ; list-style:none}
#pestanya li:hover ul,li.over ul {display:block ; float:left ; list-style:none}
#content		{clear:left ; float:left; list-style:none }

No se si es que necesito otra configuracion java-script o es que me dejo algo...grácias por adelante! :wink:

Yaneth · 7 Nov 2007, 17:21 · Solicitar retirada

hola aqui te dejo los codigos corregidos

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" type="text/css" href="despegable.css" />
<script type="text/javascript"><![CDATA[//><!]]>
</script>

</head>

<body>
<div id="global">
<div id="pestanya">
<ul id="nav">

<li class="somos">¿Quienes somos?

Productes
<ul><div id="caja">
Portes

Vidres

Finestres

</div>

Catàlegs

<li class="somos">Obres
<ul>
Ofocines TOUS

Biblioteca de Cardona

Oficines VIDAL

</div>
</div>
</body>
</html>

estilos.css
* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center}
ul li {list-style:none}
#global {width:800px ; margin: 4px auto }

#pestanya {background-color: yellow ; width: 800px ; height: 30px ;
border: green 1px solid }
a {color: black; font-size:none ; text-decoration: underline}
a:link {}
a:visited {}
a:hover {color: orange; font-size:none ; text-decoration: underline }
a:active {}

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

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

}

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

}

li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
float:left;
list-style:none;
width:7.5em;
background-color:red
}

#pestanya 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;
}

#pestanya 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
}

saludos

elektra · 9 Nov 2007, 08:18 · Solicitar retirada

gracias...pero el
sirve para algo? y esto ? porque veo que no se puede modificar el desplegable sin que se modifique tambien algo en el menu..ufff...k complicado, tendre k dedicarle + tiempo sino va a ser difícil... :?

Yaneth · 9 Nov 2007, 16:39 · Solicitar retirada

Hola

el
Es un salto de linea significa que empezará a escribir en la parte de abajo

el es un espacio irrompible, y puedes meter cuantos quieras

saludos

elektra · 9 Nov 2007, 19:41 · Solicitar retirada

Ah! gracias ! no sabes lo útil que es !! ahora lo entendio!! :D

Yaneth · 9 Nov 2007, 19:50 · Solicitar retirada

:wink:

Mayck07 · 9 Jul 2009, 17:14 · Solicitar retirada

Hola¡¡

He seguido los tutoriales paso a paso de la pagina, que estan genial por cierto, y he estado haciendo unos retoques a mi web y quería introducir un menu desplegable, el caso es que tras mucho buscar encontre un codigo con el que he conseguido hacer un menu horizontal que me gusta bastante, pero no soy capaz de hacer que se desplieguen los submenus, he estado buscando en el foro (y hay bastantes temas abiertos sobre esto) por eso no me atrevi a abrir otro nuevo y creo que en este hilo encaja bien mi pregunta (perdonad si me equivoco), y antes de cambiar el codigo en la hoja de estilos (puesto que ya lo habia adaptado un poco a mi gusto) por otros que e encontrado en este foro que no estan mal, a ver si le podeis echar un ojo y encontrais el fallo.
codigo entre "body"

<div id="subnavbar">
	 
<ul id="subnav">

[*][url="URL DEL BLOG"]PRESENTACIÓN[/url]

[*][url=""]Noticias[/url]
<ul>
[*][url=""]clasificicación[/url]

[*][url=""]Calendario[/url]

[*][url=""]Resúmenes[/url]


[*][url=""]Enfermería[/url]

[/list]


[*][url=""]HISTORIA[/url]
<ul>
[*][url=""]Liga 06/07[/url]

[*][url=""]Liga 07/08[/url]

[*][url=""]Liga 08/09[/url]

[/list]


[*][url=""]PLANTILLA[/url]

[*][url=""]PATROCINADOR[/url]
<ul>
[*][url=""]SUB-PESTAÑA3[/url]

[*][url=""]SUB-PESTAÑA3[/url]

[/list]


[*][url=""]ESCAPADAS[/url]


[*][url=""]FORO[/url]
	 
	 
	 
	 
	 
	[/list] 
	 
</div>

y en la hoja de estilos:

#subnavbar {
background-image: url(objetos/menu-negro.jpg);
width: 798px;
height: 27px;
font-weight:bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";
border-right: 1px solid #FFFFFF;
}

#subnav {
margin: 0px;
padding: 0px;
}

#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li {
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 11px;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;
}

#subnav li a:hover, #subnav li a:active {
background-image: url(objetos/menu-blanco.jpg);
color: #000000;
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #64343C;
width: 120px;
heigth: 20px
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;

border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background: #999999;
margin: 0px;
padding: 5px 10px 5px 10px;
}

#subnav li {
float: left;
padding: 0px;
}

#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}

#subnav li li { 
}

#subnav li ul a { 
width: 140px;
}

#subnav li ul a:hover, #subnav li ul a:active { 
}

#subnav li ul ul {
margin: -25px 0 0 161px;
}

#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}

#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}

#subnav li:hover, #subnav li.sfhover { 
position: static;
}

Muchas gracias de antemano