Hola:
Por ahora yo le sugeriría que que tuviese su hoja de estilo de esta manera
Y su pagina plantilla también
He quitado un par de cosas que molestaban a la pagina (un <div id="pietres">, que tenia repetido. etc.) y he ordenado un poco la hoja de estilo-general. con algun pequeño cambio en #contenido p{etc. etc.}, y un par de cosas más
Luego de que ponga de la manera que le muestro tanto su hoja de estilo-general como su pagina, entonces veremos que habrá pasado con los desplegables.
En la capa contenido, para que crezca hacia abajo, hay que escribir por lo menos unos tres o cuatro parrafos, ya que el largo de la capa contenido va de acuerdo a lo que uno va escribiéndo o insertando.
...........................................................................
Acá le dejo ( como sugerencia) el como debiera de tener su hoja de estilo-general
...................
*{text-indent:0px;margin:0px;padding:0px;border:0px;}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue;font-weight:bold;text-decoration:underline ;
text-align: center}
h2 {font.size: 1.1em;color:blue;font-weight:bold;text-decoration:none ;
text-align: center}
li{list-style:none}
body {text-align:center }
#global {width:800px;margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido {width:auto;background-color: orange ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {background-color:yellow ; width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif);
background-position: bottom ;
padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
background-image: url(objetos/menu-parte-superior.gif) }
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid ;
border-top: black 1px solid ;
height: 65px}
#pie li {list-style: none ; font-size: 12px }
#pieuno {float:left ; width:150px ; font-size: 1em}
#piedos {float:left ; width:498px ; background-color: none}
#pietres {float:left ; width:150px ; font-size: 1em}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#pie a {color: brown ; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {color: purple}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white}
#pie a:active {color: black}
a.enlaceuno {}
a.enlaceuno:link {}
a.enlaceuno:visited {}
a.enlaceuno:hover {}
a.enlaceuno:active {}
#menu a {}
#menu a:link {}
#menu a:visited {color: red}
#menu a:hover {color:darkblue ; text-decoration:underline ; background-color: lavender }
#menu a:active {}
#navegacion a {}
#navegacion a:link {}
#navegacion a:visited {color: red}
#navegacion a:hover {background-color: white }
#navegacion a:active {}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
......................................................................................
acá le dejo (como sugerencia), el como debiera de tener su pagina plantilla
........................................
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="no-tocar.txt" type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
</head>
<body onload="init();">
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
[contenido no disponible]</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
Seccion 1
Seccion 2
Seccion 3
Seccion 4
</div>
<div id="contenido">
<div id="menu">
<h1>Info</h1>
<ul>Sobre mi webEn qué consiste
BeneficiosComo funciona
</div>
<h1>Sobre mi web</h1>
Esta es una pagina que hablará de todas las cosas que se me ocurran</p>
<h2>Introducción</h2>
En todo caso es importante escribir texto en la capa contennido para que esta crezca un poco, ya que si no se hace, puede que
parezca que todo se descuadre,y el pie se ponga por acá arriba etc.</p>
Así que escribiré el suficiente texto como para que la capa contenido crezca lo suficiente y así la capa menu quede dentro de la capa contenido y no sobresalga hacia abajo</p>
</div>
<div id="pie">
<div id="pieuno"><ul>
Foro EjemploContactosNos Enlazan
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>
DirectorioTopSiteMapa de la Web
</div>
</div>
<div id="curva-inferior"></div>
</div>
<script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
</body>
</html>
................................................................................
Saludos