Tema: Cómo solucionar este efecto extraño en CSS!
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/03/2013, 16:20
Avatar de berkeleyPunk
berkeleyPunk
 
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 10 meses
Puntos: 22
Pregunta Cómo solucionar este efecto extraño en CSS!
Buen día señores. El extraño que me hace CSS es el siguiente. Tengo un menú desplegable y un poco más abajo hay un párrafo que contiene varios spans.
Cuando desplego el menú y muevo el cursor sobre la lista desplegada, ésta desaparece exactamente a la altura de los spans, como si éstos o uno de ellos se interpusiera y no dejara recorrer completa la lista desplegada. ¿Por qué?

He aquí el HTML (es mucho pero lo pongo todo para que no pierdan detalle):
Código HTML: 
Ver original
  1. <body>
  2.   <div id="header">
  3.     <center>
  4.     <ul id="ul_principal">
  5.       <li id="cero" class="radius_1">biografía</li>
  6.       <li id="cero">educación
  7.         <ul>
  8.           <li id="small">preescolar  </li>
  9.           <li id="small">primaria    </li>
  10.           <li id="small">secundaria  </li>
  11.           <li id="small">técnico     </li>
  12.           <li id="small">bachillerato</li>
  13.           <li id="small">licenciatura</li>
  14.         </ul>
  15.       </li>  
  16.       <li id="cero">logros</li>
  17.       <li id="cero">conocimientos
  18.         <ul>
  19.           <li id="small">programación</li>
  20.           <li id="small">otros       </li>
  21.         </ul>
  22.       </li>  
  23.       <li id="cero">laboral</li>
  24.       <li id="cero" class="radius_2">contacto</li>
  25.     </ul>
  26.     </center>
  27.   </div>
  28.  
  29.   <div id="content">
  30.     <br />
  31.     <br />
  32.     <br />
  33.     <br />
  34.     <br />
  35.     <br />    <br />
  36.     <br />
  37.     <br />
  38.     <br />
  39.     <br />
  40.     <br />
  41.     <center>
  42.     <p>
  43.     Nací al final de la década de <span id="span1">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 Ciudad de México. Viví los primeros 28 años allí hasta que nació mi hija (ahora con 5 años),
  44.     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
  45.     laboral...  
  46.     </p>
  47.     </center>
  48.   </div>
  49.  
  50.   <div id="footer">
  51.   </div>
  52.  
  53. </body>
Y aquí el CSS (es mucho, pero lo puse todo para que no pierdan detalle):
Código CSS: 
Ver original
  1. <style type="text/css">
  2.  
  3. //  #header, #footer y #content forman el LAYOUT principal.
  4.  
  5. #header, #footer {
  6.     width:100%;
  7.     height:110px;
  8.     background-color:white;}
  9. #content {
  10.     height:400px;
  11.     width:100%;
  12.     background-color:white;}
  13. p {
  14.     position:relative;
  15.     top:0px;
  16.     left:0px;
  17.     width:650px;
  18.     font-size:18px;
  19.     line-height:40px;
  20.     color:#666;
  21.     text-align:justify;}
  22.     
  23.     
  24. // Lo siguiente formatea el menú.
  25.  
  26. ul {
  27.     position:relative;
  28.     top:0px;
  29.     left:0px;
  30.     list-style-type:none;}  
  31. #ul_principal {
  32.     position:relative;
  33.     top:50px;
  34.     left:auto;
  35.     width:912px;
  36.     height:auto;
  37.     list-style-type:none;
  38.     margin:0px auto;}
  39. li {
  40.     font-size:20px;
  41.     font-family:Freestyle Script;
  42.     width:150px;
  43.     height:50px;
  44.     line-height:45px;
  45.     background-color:#666;
  46.     color:#FFF;
  47.     text-align:center;
  48.     border:1px solid white;
  49.     list-style-type:none;}
  50. li ul {display:none;}
  51. #cero {float:left;}
  52. #small {font-size:16px;}
  53. .radius_1 {border-radius:20px 0px 0px 20px;}
  54. .radius_2 {border-radius:0px 20px 20px 0px;}
  55. li:hover {
  56.     color:#0F0;
  57.     cursor:pointer;}
  58. li:hover ul {
  59.     display:block;
  60.     position:relative;
  61.     top:5px;
  62.     left:-41px;}
  63.     
  64. // Lo siguiente formatea los span para convertirlos en POP-UP'S.
  65.  
  66. #span1 {
  67.     position:relative;
  68.     color:red;
  69.     cursor:pointer;}
  70. #fondo1 {
  71.     display:none;
  72.     position:absolute;
  73.     top:-130px;
  74.     left:250px;
  75.     width:250px;
  76.     height:150px;
  77.     background-color:#39C;
  78.     border-radius:20px 0px 20px 0px;
  79.     box-shadow:black 10px 10px 10px;}
  80. #fondo2 {
  81.     display:none;
  82.     position:absolute;
  83.     top:10px;
  84.     left:10px;
  85.     width:210px;
  86.     height:110px;
  87.     background-color:#36C;
  88.     border-radius:15px 0px 15px 0px;
  89.     box-shadow:inset white 5px 5px 5px, inset white -5px -5px 5px;
  90.     font-size:14px;
  91.     line-height:20px;
  92.     color:white;
  93.     padding:10px;}
  94. #span1:hover span {display:block;}  
  95. #span1:hover span span {display:block;} 
  96. </style>