Ausklappbares Menu bestehend aus Button

[Nin]

Hallo nochmal,

also das Menü steht und alle Button funktionieren. Was jetzt noch mein Problem ist: Die Subnavi ist durchgehend sichtbar (nicht nur bei Rollover) und sie befindet sich nicht an der richtigen Stelle (Subnavi ist auf Höhe der anderen Button und nicht UNTER dem Button "festetouren"). Hier mal meine Definierungen...

  
<div id="menu">  
	<ul class="navi">  
		<li> <a id="einkehren" href="z_main_einkehren.html"></a> </li>  
		<li> <a id="biere" href="z_main_biere.html"></a> </li>  
		<li> <a id="festetouren" href="z_main_festetouren.html"></a>  
        <ul class="subnavi">  
			<li> <a id="bierkul" href="z_sub_bierkul.html"></a> </li>  
			<li> <a id="kultur" href="z_sub_kultur.html"></a> </li>  
			<li> <a id="bayron" href="z_sub_bayron.html"></a> </li>  
		</ul>  
		</li>  
		<li> <a id="region" href="#"></a> </li>  
		<li> <a id="shop" href="#"></a> </li>  
		<li> <a id="kontakt" href="#"></a> </li>  
	</ul>  
</div>  

  
/* Menu Anfang*/  
#menu .navi {  
		list-style-type:none;  
		float:left;  
		height:30px; width:732px;  
		margin-right:2px;  
		display:block;  
		text-decoration:none;  
}  
#menu .navi a {  
		list-style-type:none;  
		float:left;  
		height:30px; width:120px;  
		margin-right:2px;  
		display:block;  
		text-decoration:none;  
}  
/* Mainmenu Button */  
	#einkehren {background-image:url(images_layout/z_Mbutton_einkehren_off.png);}  
	#einkehren:hover, #einkehren:focus {background-image:url(images_layout/z_Mbutton_einkehren_on.png);}  
	#biere {background-image:url(images_layout/z_Mbutton_biere_off.png);}  
	#biere:hover, #biere:focus {background-image:url(images_layout/z_Mbutton_biere_on.png);}  
	#festetouren {background-image:url(images_layout/z_Mbutton_festetouren_off.png);}  
	#festetouren:hover, #festetouren:focus {background-image:url(images_layout/z_Mbutton_festetouren_on.png);}  
	#region {background-image:url(images_layout/z_Mbutton_region_off.png);}  
	#region:hover, #region:focus {background-image:url(images_layout/z_Mbutton_region_on.png);}  
	#shop {background-image:url(images_layout/z_Mbutton_shop_off.png);}  
	#shop:hover, #shop:focus {background-image:url(images_layout/z_Mbutton_shop_on.png);}  
	#kontakt {background-image:url(images_layout/z_Mbutton_kontakt_off.png);}  
	#kontakt:hover, #kontakt:focus {background-image:url(images_layout/z_Mbutton_kontakt_on.png);}  
  
#menu .subnavi {  
		list-style-type:none;  
		float:left;  
		top:32px; left:244px;  
		height:30px; width:120px;  
		margin-right:2px;  
		display:none;  
		text-decoration:none;  
}  
#menu .subnavi a {  
		list-style-type:none;  
		float:left;  
		height:30px; width:120px;  
		display:block;  
		text-decoration:none;  
}  
/* Submenu Button */  
	#bierkul {background-image:url(images_layout/z_Sbutton_bierkul_off.png);}  
	#bierkul:hover, #bierkul:focus {background-image:url(images_layout/z_Sbutton_bierkul_on.png);}  
	#kultur {background-image:url(images_layout/z_Sbutton_kultur_off.png);}  
	#kultur:hover, #kultur:focus {background-image:url(images_layout/z_Sbutton_kultur_on.png);}  
	#bayron {background-image:url(images_layout/z_Sbutton_bayron_off.png); display:none;}  
	#bayron:hover, #bayron:focus {background-image:url(images_layout/z_Sbutton_bayron_on.png);}  
	*/  
/* Menu Ende */  
  

Hoffe, ihr könnt damit etwas anfangen und mir erklären, ob diese umsetzungsweise überhaupt OK ist bzw. was ich ändern muss...

DANKE!