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?
