2 Ebenen - Horizontal Navi

[Webgau]

Servus,

ich möchte eine Horizontale Navigation erstellen, bei welcher sich die unterpunte via mousehover öffnen:

<ul>
       <li>Link 1
             <ul><li>Link 2
                     <ul> <li>Link 3</li></ul>
                    </li>
             </ul>
       </li>
</ul>

/* Main Menu Top */
#mainmenu_top  { width: 100%; padding: 0; float: left; }
#mainmenu_top div { clear: left; }
#mainmenu_top ul { margin: 0; padding: 1px; text-align: center; float: left; }
#mainmenu_top ul li { list-style: none; float: left; position: relative; margin: 0; padding: 0; background: url(../images/black/menu_linien_top.png) repeat-y right center; }
#mainmenu_top ul a, #mainmenu_top ul span { display: block; padding: 12px 30px 13px; text-decoration: none; font-weight: bold; color: #FFF; }
#mainmenu_top ul a:hover, #mainmenu_top ul span, li a#aktuell { color: white; background-color: gray; }

#mainmenu_top ul li ul { margin: 0; padding: 0; position: absolute; top: 40px; display: none; background-color:#666; width: 200px; text-align: left;  /* Unternavigation ausblenden */ }
#mainmenu_top ul li:hover ul { display: block; }
#mainmenu_top ul li ul li { float: none; display: block; margin-bottom: 0.2em; }
li a#aktuell {  /* aktuelle Rubrik kennzeichnen */ color: maroon; background-color: silver; } 
#mainmenu_top ul li ul span {  /* aktuelle Unterseite kennzeichnen */ background-color: maroon; }

Das Funktioniert auch soweit bei der ersten ebene (also link1) nur leider öffnet sich gleichzeitig die zweite ebene gleich mit also link3, ich möchte aber das diese sich erst öffnet wenn ich über link 2 gehe.

Ich hatte es so versucht:

#mainmenu_top ul li ul li ul { margin: 0; padding: 0; position: absolute; left: 200px; display: none; background-color:#666; width: 200px; text-align: left;  /* Unternavigation ausblenden */ }

allerdings ohne erfolg

Kann mir jemand weiter helfen?

Grüße Mirko

 

[SpiceLab]

Besser (auf den Tag genau) 2 Monate zu spät, als nie

/* Submenü-Ebenen verstecken */
#mainmenu_top ul ul,
#mainmenu_top ul li:hover ul ul 
{ 
    display:none; 
}
/* Submenü-Ebenen zeigen */
#mainmenu_top ul li:hover ul,
#mainmenu_top ul ul li:hover ul 
{ 
    display:block; 
}