Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/08/2005, 14:53
celix
 
Fecha de Ingreso: mayo-2005
Mensajes: 49
Antigüedad: 12 años, 11 meses
Puntos: 0
menu drop-down ,problema

hola, tengo un problema. me copie un menu css de una pagina, lo adapte a mis medidad y todo bien, pero el problema es uno estetico, y no sabria como solucionarlo.

cuando pasas por las diferentes opciones, aparece un menu abajo con subopciones y si cambias de opcion tambien cambian las "subopciones". lo queno me gusta es que cuando pasaste por un casillero y quitas el maus de ahi, las subopciones siguen en la pantalla y yo quisiera que desparasescan.

les pongo el codigo para que entiendan mejor:

Código HTML:
<SCRIPT type=text/javascript>
<!--
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</SCRIPT>

<STYLE type=text/css>BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: white; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 80% verdana, arial, sans-serif; PADDING-TOP: 0px
}
DL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DT {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DD {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu {
	Z-INDEX: 100; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px
}
#menu DL {
	FLOAT: left; WIDTH: 12%
}
#menu DT {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; FONT-WEIGHT: bold; BACKGROUND: #54A9F9; MARGIN: 1px; BORDER-LEFT: gray 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid; TEXT-ALIGN: center
}
#menu DD {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; DISPLAY: none; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid
}
#menu LI {
	BACKGROUND: #fff; TEXT-ALIGN: center
}
#menu LI A {
	BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #000; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
#menu DT A {
	BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #000; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
#menu LI A:hover {
	BACKGROUND: #92CAFF;
}
#menu DT A:hover {
	BACKGROUND: #eee;
}
#site {
	BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 5px; Z-INDEX: 1; LEFT: 10px; PADDING-BOTTOM: 5px; BORDER-LEFT: gray 1px solid; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; TOP: 70px; BACKGROUND-COLOR: #ddd
}

</STYLE>

<BODY>
<DIV id=menu>

<DL>
<DT onmouseover="javascript:montre('smenu1');">Colonia
	<DD id=smenu1>
	<UL>
	<LI><a href="" target="_parent">submenu1</a> 
	<LI><a href="" target="_parent">submenu2</a> 
	<LI><a href="" target="_parent">submenu3</a> 
	<LI><a href="" target="_parent">submenu4</a> 
	</LI>
	</UL>
	</DD>
</DL> 
me dejo entender? como haria? a lo mejor una funcion onmouseover, pero no sbaria que ponerle. ayuda porfavor, gracias