Menú desplegable aparece separado del menu principal

[sandrukymp]

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:

.nav a:link, .nav a:visited
{
color:#708090;
text-decoration:none;
}
 
.nav a:hover{color:#8B0000}
 
.nav
{
  width:150px;
  float:left;
  background: ghostwhite;
  text-align:left;
  font-weight:bold;
  font-size:12px;
  padding-top:20px;
/*float es para mantener el nav a la izquierda, es muy importante*/
 
}
 
 
 
ul {
    padding-left: 10px;
    margin-left: 10px;
    list-style-type: none;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
}
 
ul li {
    position: relative;
}
 
li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
    padding: 0px;
    }
 
ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: ghostwhite;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }
li:hover ul { display: block; }
 

----------------------------------------------------------------------------------------------------

Código HTML:

<DIV CLASS="nav">
<UL>
<LI><A HREF="#">Home</A></LI>
<LI><A HREF="#">Unsere Sprachschule</A>
<UL><BR>
 
<LI><A HREF="#">Photogalerie</A></LI>
<LI><A HREF="#">Unser Team</A></LI></UL></LI>
<LI><A HREF="#">Unsere Sprachkurse</A></LI>
<LI><A HREF="#">Spanischkurse</A>
<UL><BR>
<LI><A HREF="#">Kurse für Erwachsene</A></LI>
<LI><A HREF="#">Erwachsene Starttermine</A></LI>
<LI><A HREF="#">Kurse für Jugendliche</A></LI>
<LI><A HREF="#">Kurse für Unternehmen</A></LI>
<LI><A HREF="#">DELE Vorbereitung</A></LI>
</UL></LI>
<li><a href="#">Deutschkurse</a>
<ul>
<BR>
<li><a href="#">Starttermine</a></li>
</ul>
</li> 
<li><a href="#">Englischkurse</a>
<ul>
<BR>
<li><a href="#">Starttermine</a></li>
</ul>
</li> 
<li><a href="#">Italienischkurse</a> 
<ul>
<BR>
<li><a href="#">Starttermine</a></li>
</ul>
</li>
<LI><A HREF="aktivitaeten.html">Kulturelle Aktivitäten</A></LI>
<LI><A HREF="anmeldeformular.html">Anmeldeformular</A></LI>
<LI><A HREF="kontakt.html">Kontakt</A></LI>
<LI><A HREF="links.html">Links</A></LI>
<LI><A HREF="impressum.html">Impressum - AGBs</A></LI></UL>
<BR>
<BR></DIV>
 

Así es exactamente como aparece:



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

[sandrukymp]

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!