Menü klappt nur bei Klick auf

Hallihallo,
also ich bin noch absoluter beginner in TypoScript und versuche gerade eine horizontale navigation mit unterpunkten aufzubauen. bisher hat alles gut funktioniert, die unterpunkte werden auch aufgeklappt, allerdings nur bei Klick auf den Hauptmenüpunkt. Wie bekomm ich des hin, dass es bei rollover aufklappt und bei verlassen automatisch wieder schließt?

Hier mal mein TypoScript

marks.NAVIGATION = HMENU
  marks.NAVIGATION {
    1 = TMENU
    1.entryLevel = 0
    1.wrap = <ul> | </ul>
    1.NO.wrapItemAndSub = <li> | </li>
    1.CUR = 1
    1.CUR < .1.NO
    1.CUR.doNotLinkIt = 1
    
    
    2 = TMENU
    2.entryLevel = 1
    2.wrap = <div id="subnavi"><ul> | </ul></div>
    2.NO.wrapItemAndSub = <li> | </li>
    2.CUR = 1
    2.CUR < .2.NO
    2.CUR.doNotLinkIt = 1
    
  }

Im TypoScript:

1.expAll=1

Im CSS:

.subnavi {display:none}
ul:hover .subnavi {display:block}

Wichtig: mach aus id="subnavi" class="subnavi", denn es kann vorkommen, dass es mehrere subnavis gibt.

Dankeschön hat mich schonmal was weitergebracht,
allerdings habe ich nun das Problem, dass die Untermenüpunkte jetzt immer bei einem Rollover angezeigt werden und nicht nur bei dem Menüpunkt zu dem sie gehören.
Außerdem werden die Unterpunkte nun plötzlich nebeneinander angezeigt anstatt untereinander.

entschuldige, es hätte li:hover heißen müssen, nicht ul:hover. Dass die Unterpunkte jetzt nebeneinander angezeigt werden liegt wahrscheinlich daran, dass du die Änderung von #subnavi auf .subnavi im CSS noch nicht an allen Stellen durchgeführt hast.