Cómo solucionar este efecto extraño en CSS!

[berkeleyPunk]

He reeditado el HTML y CSS presentado más arriba. El compañero BONEZ tenía toda la razón: TODO EL CÓDIGO era un desastre.
Lo extraño no era el efecto raro que yo vi en un primer momento, lo extraño era que medio funcionara el código!

Lista de errores (al menos los que advertí):
1. asignar el mismo ID a múltiples elementos HTML. Lo hice así porque pretendía asignar a todos los elementos con ese ID cierto diseño. Pero al parecer la idea de un ID no es esa, sino asingar un identificador único a un elemento. Para hacer lo que yo quería hacer, debe emplearse una CLASE.
2. incluir diseño en HTML (como la etiqueta CENTER). La idea fundamental de CSS es separar el contenido del diseño, así que si nos vemos en la necesidad de centrar, hay que centrar con CSS.
3. ¡Los comentarios! los puse originalmente con la etiqueta //. Hace tiempo que no programaba, y medio recordé que los comentarios se abrían así, pero viendolo mejor creo que son de JavaScript.
4. y no sé que otros errorcillos menos evidentes, pero que provocaban el extraño que antes mencionaba.

Gracias amigo BONEZ, me hiciste buscar y arreglar por mí mismo la bronca. Para que veas cómo quedó, aquí muestro el resultado. Verás que el código mejoró notablemente. Te agradecería que indicaras si vez algo malo en este nuevo código (sigo empleando las mismas etiquetas, las que mencionas que ya son obsoletas):

Código HTML:

<div id="header">
    <ul class="centrar">
      <li class="float_left radius_1">biografía</li>
      <li class="float_left">educación
        <ul>
          <li class="small">preescolar  </li>
          <li class="small">primaria    </li>
          <li class="small">secundaria  </li>
          <li class="small">técnico     </li>
          <li class="small">bachillerato</li>
          <li class="small">licenciatura</li>
        </ul>
      </li>  
      <li class="float_left">logros</li>
      <li class="float_left">conocimientos
        <ul>
          <li class="small">programación</li>
          <li class="small">otros       </li>
        </ul>
      </li>  
      <li class="float_left">laboral</li>
      <li class="float_left radius_2">contacto</li>
    </ul>
  </div>
 
  <div id="content">
    <br />
    <br />
    <center>
    <p>
    Nací al final de la década de <span class="span">1970<span id="fondo1"><span id="fondo2">La Real Academia de la Lengua Española indica que la forma correcta de anunciar una década es la mencionada, y no: "Los setentas".</span></span></span>, en el sur de la <span class="span">Ciudad de México<span id="fondo11"><span id="fondo22">Ciudad de México<br />Habitantes: 8,851,080<br />(<a class="link" href="http://www3.inegi.org.mx/sistemas/mexicocifras/default.aspx?src=487&e=9">censo INEGI 2010</a>)<img src="media/Mapa1.png" /></span></span></span>. Viví los primeros 28 años allí hasta que nació mi hija (ahora con 5 años),
    y desde entonces vivo al oriente de la misma ciudad. Tengo una carrera en el area de humanidades. Como esta carrera prácticamente no tiene campo
    laboral...
    </p>
    </center>
  </div>
 
  <div id="footer">
  </div>
 

Código CSS:

/*            L A Y O U T            */
 
#header, #footer {
    width:100%;
    height:110px;
    background-color:white;
    margin:0px auto;}
#content {
    background: -moz-linear-gradient(top, aliceblue , cadetblue);
    height:400px;
    width:100%;
    background-color:white;}
 
/*            M E N Ú            */
 
li {
    font-size:20px;
    width:150px;
    height:50px;
    line-height:45px;
    background-color:#666;
    color:#FFF;
    text-align:center;
    border:1px solid white;
    list-style-type:none;}
li ul {display:none;}
li:hover {
    color:#0F0;
    cursor:pointer;}
li:hover ul {
    display:block;
    position:relative;
    top:5px;
    left:-41px;}
    
/*            C L A S E S            */
 
.small {font-size:16px;}
.float_left {float:left;}
.radius_1 {border-radius:20px 0px 0px 20px;}
.radius_2 {border-radius:0px 20px 20px 0px;}
.span {
    position:relative;
    color:slateblue;
    cursor:pointer;}
.link {
    font-size:10px;
    color:white;
    text-decoration:blink;}
.centrar {
    width:912px;
    margin-left:auto;
    margin-right:auto;} 
    
/*            P O P -  UP'S            */
 
p {
    width:650px;
    font-size:18px;
    line-height:40px;
    color:#666;
    text-align:justify;}
#fondo1 {
    position:absolute;
    top:-80px;
    left:50px;
    width:250px;
    height:150px;
    background-color:#39C;
    border-radius:20px 0px 20px 0px;
    box-shadow:black 10px 10px 10px;
    z-index:1000;}
#fondo2 {
    position:absolute;
    top:10px;
    left:10px;
    width:210px;
    height:110px;
    background-color:#36C;
    border-radius:15px 0px 15px 0px;
    box-shadow:inset white 5px 5px 5px, inset white -5px -5px 5px;
    font-size:14px;
    line-height:20px;
    color:white;
    padding:10px;
    z-index:1000;}
#fondo11 {
    position:absolute;
    top:-130px;
    left:135px;
    width:250px;
    height:150px;
    background-color:#39C;
    border-radius:20px 0px 20px 0px;
    box-shadow:black 10px 10px 10px;
    z-index:1000;}
#fondo22 {
    position:absolute;
    top:10px;
    left:10px;
    width:210px;
    height:110px;
    background-color:#36C;
    border-radius:15px 0px 15px 0px;
    box-shadow:inset white 5px 5px 5px, inset white -5px -5px 5px;
    font-size:14px;
    line-height:20px;
    color:white;
    padding:10px;
    z-index:1000;}
img {
    width:100px;
    height:100px;
    float:right;}
img:hover {
    width:350px;
    height:350px;}
 
span span {display:none;}
span span span {display:none;}
 
.span:hover span {display:block;}   
.span:hover span span {display:block;}