Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/03/2010, 13:33
sandrukymp
 
Fecha de Ingreso: marzo-2010
Mensajes: 10
Antigüedad: 8 años, 7 meses
Puntos: 0
Menú desplegable aparece separado del menu principal

Hola! estoy haciendo un menu con listas y dandole forma con CSS, y el problema que tengo es que al pasar el ratón por por el elemento principal de la lista, éste se despliega pero aparece separado del principal, de forma que no logro acceder a éste con el ratón.
Os muestro el código:


Código CSS:
Ver original
  1. .nav a:link, .nav a:visited
  2. {
  3. color:#708090;
  4. text-decoration:none;
  5. }
  6.  
  7. .nav a:hover{color:#8B0000}
  8.  
  9. .nav
  10. {
  11.   width:150px;
  12.   float:left;
  13.   background: ghostwhite;
  14.   text-align:left;
  15.   font-weight:bold;
  16.   font-size:12px;
  17.   padding-top:20px;
  18. /*float es para mantener el nav a la izquierda, es muy importante*/
  19.  
  20. }
  21.  
  22.  
  23.  
  24. ul {
  25.     padding-left: 10px;
  26.     margin-left: 10px;
  27.     list-style-type: none;
  28.     list-style: none;
  29.     width: 150px;
  30.     border-bottom: 1px solid #ccc;
  31. }
  32.  
  33. ul li {
  34.     position: relative;
  35. }
  36.  
  37. li ul {
  38.     position: absolute;
  39.     left: 149px;
  40.     top: 0;
  41.     display: none;
  42.     padding: 0px;
  43.     }
  44.  
  45. ul li a {
  46.     display: block;
  47.     text-decoration: none;
  48.     color: #777;
  49.     background: ghostwhite;
  50.     padding: 5px;
  51.     border: 1px solid #ccc;
  52.     border-bottom: 0;
  53.     }
  54. li:hover ul { display: block; }
----------------------------------------------------------------------------------------------------


Código HTML:
Ver original
  1. <DIV CLASS="nav">
  2. <UL>
  3. <LI><A HREF="#">Home</A></LI>
  4. <LI><A HREF="#">Unsere Sprachschule</A>
  5. <UL><BR>
  6.  
  7. <LI><A HREF="#">Photogalerie</A></LI>
  8. <LI><A HREF="#">Unser Team</A></LI></UL></LI>
  9. <LI><A HREF="#">Unsere Sprachkurse</A></LI>
  10. <LI><A HREF="#">Spanischkurse</A>
  11. <UL><BR>
  12. <LI><A HREF="#">Kurse für Erwachsene</A></LI>
  13. <LI><A HREF="#">Erwachsene Starttermine</A></LI>
  14. <LI><A HREF="#">Kurse für Jugendliche</A></LI>
  15. <LI><A HREF="#">Kurse für Unternehmen</A></LI>
  16. <LI><A HREF="#">DELE Vorbereitung</A></LI>
  17. </UL></LI>
  18. <li><a href="#">Deutschkurse</a>
  19. <ul>
  20. <BR>
  21. <li><a href="#">Starttermine</a></li>
  22. </ul>
  23. </li>
  24. <li><a href="#">Englischkurse</a>
  25. <ul>
  26. <BR>
  27. <li><a href="#">Starttermine</a></li>
  28. </ul>
  29. </li>
  30. <li><a href="#">Italienischkurse</a>
  31. <ul>
  32. <BR>
  33. <li><a href="#">Starttermine</a></li>
  34. </ul>
  35. </li>
  36. <LI><A HREF="aktivitaeten.html">Kulturelle Aktivitäten</A></LI>
  37. <LI><A HREF="anmeldeformular.html">Anmeldeformular</A></LI>
  38. <LI><A HREF="kontakt.html">Kontakt</A></LI>
  39. <LI><A HREF="links.html">Links</A></LI>
  40. <LI><A HREF="impressum.html">Impressum - AGBs</A></LI></UL>
  41. <BR>
  42. <BR></DIV>

Así es exactamente como aparece:



¿Podéis ayudarme a que funcione correctamente?
¡Muchas gracias!