Foros del Web » Creando para Internet » CSS »

Menú desplegable aparece separado del menu principal

Estas en el tema de Menú desplegable aparece separado del menu principal en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/03/2010, 14:33
 
Fecha de Ingreso: marzo-2010
Mensajes: 10
Antigüedad: 7 años, 8 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!
  #2 (permalink)  
Antiguo 27/03/2010, 14:40
 
Fecha de Ingreso: marzo-2010
Mensajes: 10
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Menú desplegable aparece separado del menu principal

Hola otra vez!

Lo he arreglado modificando los atributos left y top en li ul... la verdad es que era sencillo, gracias!

Otros dos problemillas relacionados:

- quisera que los elementos desplegables fueran más estrechos que los principales, ¿cómo puedo hacer ésto?

- funciona bien en Mozilla pero no en Explorer :( ¿Qué puedo hacer para que me funcione también en este navegador?

¡Muchas gracias!

Etiquetas: desplegable, principal
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:16.