Hola, me bajé este código de un menu desplegable
Código HTML:
<!--
Código de un menú desplegable. Cada botón principal llama a la función Menu con sus respectivos parámetros y cambia la clase de su DIV correspondiente a NOMBREVisible o NOMBREOculto. Éstos manejan a su vez la separación con el menú superior.
Éstos datos deben ser modificados en relación a la cantidad de items que tenga cada menú.
-->
<html>
<style>
*{
background-color: #CCCCCC;
}
#button1 {
width: 181px;
background-image: url(seccion1.gif);
height: 29px;
background-repeat: no-repeat;
}
#button2 {
width: 181px;
background-image: url(seccion2.gif);
height: 29px;
background-repeat: no-repeat;
}
#button3 {
width: 181px;
background-image: url(seccion3.gif);
height: 29px;
background-repeat: no-repeat;
}
.botonMenuDespl {
margin-left: 5px;
width: 160px;
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
.EficienciaVisible {visibility: "visible"; margin-bottom: -15px; margin-top: -38px}
.EficienciaOculto {visibility: "hidden"; margin-top: -200px}/* cambio la separaccion de las secciones, con todos los ocultos*/
.PciVisible {visibility: "visible"; margin-bottom: -15px; margin-top: -38px}
.PciOculto {visibility: "hidden"; margin-top: -175px}
.SolarVisible {visibility: "visible"; margin-bottom: -15px; margin-top: -38px}
.SolarOculto {visibility: "hidden"; margin-top: -130px}
</style>
<script>
function Menu(id_Div,nombre) {
if(id_Div.className == nombre + "Oculto") {
id_Div.className = nombre + "Visible";
} else {
id_Div.className = nombre + "Oculto";
}
}
</script>
<body>
<div id="button1" onClick="Menu(DivEficiencia, 'Eficiencia')" style="cursor:pointer"></div><br>
<div id=DivEficiencia class=EficienciaOculto>
<br>
<table cellspacing=0 style="background-color:#CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:12px" width="170px">
<tr>
<td align="center" width="170px" height="25px"><div class=BotonMenuDespl>Noticia 1</div></td>
</tr>
<tr>
<td align="center" width="170px" height="25px"><div class=BotonMenuDespl>Noticia 2</div></td>
</tr>
<tr>
<td align="center" width="170px" height="25px"><div class=BotonMenuDespl>Noticia 3</div></td>
</tr>
<tr>
<td align="center" width="170px" height="25px"><div class=BotonMenuDespl>Noticia 4</div></td>
</tr>
<tr>
<td align="center" width="170px" height="25px"><div class=BotonMenuDespl>Noticia 5</div></td>
</tr>
</table>
</div>
<br><br>
<div id="button2" onClick="Menu(DivPci, 'pci')" style="cursor:pointer"></div><br>
<div id=DivPci class=PciOculto>
<br>
<table cellspacing=0 style="background-color:#CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:12px" width="170px">
<tr>
<td align="center" width="170px" height="25px"><div class=BotonMenuDespl>Noticia 1</div></td>
</tr>
<tr>
<td align="center" width="170px" height="25px"><div class=BotonMenuDespl>Noticia 2</div></td>
</tr>
<tr>
<td align="center" width="170px" height="25px"><div class=BotonMenuDespl>Noticia 3</div></td>
</tr>
<tr>
<td align="center" width="170px" height="25px"><div class=BotonMenuDespl>Noticia 4</div></td>
</tr>
</table>
</div>
<br><br>
<div id="button3" onClick="Menu(DivSolar, 'Solar')" style="cursor:pointer"></div><br>
<div id=DivSolar class=SolarOculto>
<br>
<table cellspacing=0 style="background-color:#CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:12px" width="170px">
<tr>
<td align="center" width="170px" height="25px"><div class=BotonMenuDespl>Noticia 1</div></td>
</tr>
<tr>
<td align="center" width="170px" height="25px"><div class=BotonMenuDespl>Noticia 2</div></td>
</tr>
<tr>
<td align="center" width="170px" height="25px"><div class=BotonMenuDespl>Noticia 3</div></td>
</tr>
</table>
</div>
</body>
</html>
Lo he conseguido personalizar a mi gusto, pero el problema es a la hora de situarlo en mi página, y es que lo meto dentro de una div, y se me queda todo oculto.
No se de que manera modificar el codigo para que no me ocurra esto.
Alguien me podría ayudar?