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!