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