✔ Problem mit Struktur für ein aufklappendes horizont. Menu

[Dragonate]

Bin hier gerade am verzweifeln. Ich hab ein horizontales Menu was sich im Banner DIV befindet, dieses sieht auch alleine gut aus und t. Jetzt habe ich weitere
Unter-listen-elemente eingefügt die ich später für ein aufklappendes Menu verwenden will, diese ordnen sich aber auch horizontal neben den Übergeordneten Listeneinträgen an, und nicht dadrunter, hier mal der Code:

<div id="banner">
	
	<ul id="navi"> 
			
		<li> <a href="#" style="width:175px;">&nbsp;</a> </li> 
		<li> <a href="#">Home</a> </li> 
		<li> <a href="#">Pferde</a> 
			<ul id="navi_hidden">
				<li><a href="#">Pferd 1</a></li>
				<li><a href="#">Pferd 2</a></li>
				<li><a href="#">Pferd 3</a></li>
				<li><a href="#">Pferd 4</a></li>
			</ul>
		</li>			
		<li> <a href="#">Zucht</a> 
			<ul id="navi_hidden">
				<li><a href="#">Auszeichnungen</a></li>
				<li><a href="#">Pflege</a></li>
				<li><a href="#">Ausstattung</a></li>
			</ul>
		</li> 
			
		<li> <a href="#">Kontakt</a> 
			<ul id="navi_hidden">
				<li><a href="#">Anfahrt</a></li>
				<li><a href="#">Kontaktformular</a></li>
			</ul>
		</li> 
			
		<li> <a href="#" style="width:195px;">&nbsp;</a> </li> 
		
	</ul> 
											
</div>

relevanter CSS-Code :

#banner{ 
	margin:auto;
	margin-top:2%;
	padding-top:75px;
	width:760px; 
	height:25px;
	background-image:url(../pictures/banner.jpg);
	background-color: #fdfdfd;
	font-size:93%; 
	background-repeat:no-repeat;
}

#navi{ 
	margin: 0;
	padding: 0; 
	text-align:center; 
} 
#navi ul, #navi li{ 
	margin: 0; 
	padding: 0; 
	display: inline; 
	list-style-type: none; 
} 
#navi a{ 
	display:block;
	float: left; 
	line-height: 20px; 
	font-weight: bold; 
	margin: 0 2px; 
	padding: 2px 15px; 
	text-decoration: none; 
	color: #FFFFFF;
	background-color: #003366; 
 } 
 
#navi_hidden{
	margin: 0;
	padding: 0; 
	text-align:center; 
}

#navi_hidden ul, #navi_hidden li{
	margin:0;
	padding:0;
	list-style-type: none;
}

#navi_hidden a{ 
	display:block;
	float: left; 
	line-height: 20px; 
	font-weight: bold; 
	margin: 0 2px; 
	padding: 2px 15px; 
	text-decoration: none; 
	color: #FFFFFF;
	background-color: #003366; 
}

Ich habe extra für die "Unterlisten" einen quasi kopierten DIV erstellt indem ich kein DISPLAY:inline; habe, damit sich diese nicht daneben anordnen, kann mir wer weiterhelfen? (Später würde ich dann das Untermenü per Jquery verstecken und einblenden wollen, aber ersma muss das ja stimmen)

 

[Maik]

Hi,

deinen <ul>-Elementen der zweiten Menüebene fehlen noch ein paar individuelle CSS-Regeln.

Gibt das ein Dropline- oder Dropdown-Menü?

• CSS-basierte Navigationsleisten
• Listen-Navigationen

mfg Maik

 

[Dragonate]

Also es soll ein Dropdown Menu sein das durchs hovern ausfährt, das würde ich mit Jquery auch hinkriegen denke ich.

Aber wiegesagt die Anordnung stimmt nicht und weis nicht wie ichs hinkriege, ich glaube das das Problem ist, das DISPLAY:inline; auch für die Listen der untergeordneten Ebene gillt und diese sich dadurch auch nebeneinander anordnen. Habe versucht das über Klassen Rückgängig zu machen, aber tut sich garnix ... Kannst mir die CSS Kniffe sagen ?

 

[Maik]

http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones1.html

Die "Kniffe" kannst du in meinen empfohlenen Links nachlesen, damit sie beim nächsten Menü nicht wieder in Vergessenheit geraten.

mfg Maik

 

[Dragonate]

Jo danke, ich habs damit jetzt hingekrigt !