CSS Dynamische CSS-Menüs bringen mich zur Weißglut

[raven16]

Hi ihr seid meine letzte Hoffnung
Muss heute Abend ne Homepage für die Schule abschicken und um ne 1 zu bekommen, wäre es schön, wenn wir ein dynamisches CSS-Menü einbauen.

Ich bekomm es einfach nicht hin, dass die 2. Ebene beim hover der 1. Ebene des Menüs vernünftig eingeblendet wird.

Der HTML-Quelltext dazu:

<ul class="mainmenu">
	<li><a class="mainmenu" href="#">Home</a></li>
	<li><a class="mainmenu" href="#">Shop</a>
		<ul>
			<li><a href="#">Damen</a></li>
			<li><a href="#">Herren</a></li>
			<li><a href="#">Kinder</a></li>
			<li><a href="#">Fan Stuff</a></li>
		</ul>
	</li>
	<li><a class="mainmenu" href="#">Tickets</a></li>
	<li><a class="mainmenu" href="#">Mitglieder</a></li>
	<li><a class="mainmenu" href="#">Nachwuchs</a></li>
	<li><a class="mainmenu" href="#">Borusseum</a></li>
	<li><a class="mainmenu" href="#">Sponsoring</a></li>
</ul>

CSS-Code für die Tags

/*-->1. Ebene*/
ul.mainmenu{
	height: 25px;
}
ul.mainmenu li{
	display: inline;
	list-style: none;
	height: 25px;
	background: #464328;
	float: left;
	position: relative;
	margin-left: 3px;
}
a.mainmenu{
	min-width: 20px;
	height: 22px;
	padding-top: 3px;
	padding-left: 10px;
	padding-right: 10px;
	background: #464328;
	text-decoration: none;
	color: #ffe700;
	display: block;
}
a.mainmenu:hover{
	background: #ffe700;
	color: #000;
}
/*-->2. Ebene*/
ul.mainmenu ul{
	display: none;
}
ul.mainmenu li:hover li{
	display: inline;
	list-style: none;
	height: 25px;
	background: #fff;
	float: left;
}
ul.mainmenu li:hover ul li a{
	display: block;
	height: 25px;
}

Habt ihr ne Idee, wie ich die Links der 2. Ebene in dem gelben Feld nebeneinander anzeigen kann, wenn in der 1. Ebene mit der Maus z.B. in diesem Fall auf Shop fahre?

Danke schon mal im Vorraus!

 

[ripuli-6]

ist der fehler nicht hier zu sehen?

/*-->2. Ebene*/
ul.mainmenu ul{
	display: none;
}
ul.mainmenu li:hover li{
	display: inline;
	list-style: none;
	height: 25px;
	background: #fff;
	float: left;

versuch mal das ausgeblendete ul wieder einzublenden außerdem ist die verschachtelung nicht richtig beim ausblenden, denn du hast ja ul->li->ul

 

[raven16]

ist der fehler nicht hier zu sehen?

versuch mal das ausgeblendete ul wieder einzublenden ;)[/QUOTE]

Sry ich bin einfach zu doof dafür :D

also muss ich
[B]
ul.mainmenu li a.mainmenu:hover ul = display:block; [/B]

setzen oder wie?
[automerge]1309719300[/automerge]
Wenn ich die 2. Ebene so verändere:
[CODE]
/*-->2. Ebene*/
ul.mainmenu ul{
	display: none;
}
ul.mainmenu li:hover ul{
	display:block;
	height: 25px;
	background: #fff;
}

dann blendet sich zwar was ein, aber das sieht dann nicht so aus wie ich das möchte

Der weiße Hintergrund ist zwar zu sehen aber die Links von der 1. Ebene verschieben sich irgendwie nach unten weil der Menüpunkt Shop auf einmal breiter wird...

 

[Crizzo]

Hilft dir dieses Tutorial: http://www.thestyleworks.de/tut-art/listnav5.shtml ?

Am besten fängst du aber bei Teil 1 an: http://www.thestyleworks.de/tut-art/listnav.shtml

 

[mustermen]

Moin ich habe mal so ein menu erklärt findest du hier:
https://www.computerbase.de/forum/threads/div-container-aufbau.846319/
musst du mal suchen wo es dort anfängt, sind aber nur 4 Seiten.
Habe damals gstarr geholfen so ein menu zu machen kannst du hier sehen, http://www.gxpc.de/.