CSS Aufklappmenü klappt nicht

Hallo zusammen,
ich bin neu hier und auch relativ frisch mit CSS3 unterwegs. Manches möchte noch nicht so funktionieren wie es soll.
Seit Tagen hänge ich an einem CSS-Aufklappmenü für eine (responsive) Website.
Das Menü sieht so aus:

<div id="nav">
<ul>
<li><a href="index.html">Start</a></li>

<li><a href="details.html">Details</a></li>
<ul><li><a href="">Internetfrontend</a></li>
<li><a href="">Features</a></li>
<li><a href="">Verwaltung</a></li>
<li><a href="">Handling</a></li>
</ul>
<li><a href="#">Onlinedemo</a></li>
<ul><li><a href="">Frontend Internet</a></li>
<li><a href="">Backend Admin</a></li>
<li><a href="">Backend Agentur</a></li>
<li><a href="">Musterhomepage</a></li>
</ul>
<li><a href="#">Preisangebot</a></li>
<li><a href="#">Kontakt</a></li>

</ul>
</div>

Solange ich nichts bestimmtes tu, sind alle Menüpunkte bei der Mobile-Version brav untereinander. Ich möchte aber, dass die 2. Naviebene nur beim Hovern eines Listenpunktes eingeblendet wird. Da scheitere ich. Display:none funktioniert noch, aber weiter tut sich nix . Hab ich Tomaten auf den Augen???

/*klapp mich auf*/
#nav ul ul{
display: none;
}


#nav li:hover ul {
display: block;
}

Manche Tutorials arbeiten auch mit verschieben anstatt mit display, hab ich auch getestet, geht auch nicht. Ich vermute den Fehler bei "#nav li:hover ul ", aber ich komm einfach net drauf

Grüße, Martina

Wie meinst du, nicht in einem li drin?
Hmm vielleicht etwas unübersichtlich hier mal die Struktur gekürzt...

<ul>
<li>...</li>
<li><a...>Details</a></li>
<ul>
<li><a...>...</a></li>
<li><a...>...</a></li>
<li><a...>...</a></li>
<li><a...>...</a></li>
</ul>
</ul>

ist das falsch?? Muss ich das schließende </li> bei Details ganz ans Ende von der zweiten Liste setzen?

Lg Martina

Au mann ich verreck das war der Fehler. Und es ist eigentlich auch noch logisch dass das </li> hinten dran muss! Ojeoje ich brauch jetz erstmal en Tee^^
Ich danke euch vielmaligst!!!!!

Lg Martina