[TYPO3-german] horizontales Drop-Down-Menü

[Hahnefeld Bjoern]

Hallo zusammen,

ich versuche gerade, ein horizontales Drop-Down-Menü zu bauen. Zwei Probleme habe ich dennoch:

1. Breite der H3-Überschriften
Ich möchte keine fixe Breite für die UL-Elemente vergeben. Damit meine ich die Hauptmenüpunkte. Diese sollen ähnlich wie bei den alten Windowsmenüs je nach Breite nebeneinander angeordnet sein. Das aufgeklappte Menü kann sich von der Breite gerne unter den anderen Menüpunkten befinden. Gegenwärtig werden aber die anderen Hauptmenüpunkte nach rechts verschoben, wenn er Hover aufgeklappt wird. Ursprünglich dachte ich, ich könnte dies mit "overflow: hidden" verhindern. Das ist mir leider nicht geglückt (oder ich habe dies an der falschen Stelle getan).

2. Menüs klappen auf, aber sind nicht anklickbar
Die Menüs klappen auf, aber ich kann die Menüeinträge nicht anwählen. Sobald ich dies tue, verschwinden die aufgeklappten Listen wieder. Offensichtlich ein Fehler im CSS, den ich leider nicht finden kann. Es soll zwischen dem Hauptmenü und den Untermenüpunkten (und auch zwischen diesen) ein kleiner Spalt von 2px sein. Optisch habe ich dies hinbekommen. Doch offensichtlich ist genau dies aber der Grund, warum die Menüleiste nicht aufgeklappt bleibt? Wie kann man dies umgehen?

3. z-order
Mir ist aufgefallen, dass das Menü sich nicht über den Text legt, sondern diesen nach unten verschiebt. Gewünscht wäre aber in meinem Fall, dass das Menü alle anderen Elemente überlappt. Ist das möglich? Ich habe mit z-order gespielt, doch dies scheint nicht den gewünschten Effekt zu bringen :(

Viele Grüße

Björn


CSS:
--
#menu
{
	float: left;
	width: 600px;
}

#menu ul
{
	float: left;
	margin: 4px 0 0 8px;
	list-style: none;
}

#menu h3
{
	padding: 0 12px 0 12px;
	text-transform: uppercase;
	font-size: 115%;
	color: #ffffff;
	cursor: pointer;
}

#menu h3:hover, #menu h3.active
{
	color: #cdcdcd;
}

#menu a
{
	text-decoration: none;
	display: block;
	background: #535353;
	color: #ffffff;
	padding: 5px 40px 5px 20px;
	margin-top: 1px;
}

#menu a:hover, #menu a.active
{
	color: #006bb3;
}

#menu ul ul
{
	position: relative;
	z-index: 999;
	display: none;
}

#menu li
{
	position: relative;
}

#menu ul li:hover ul
{
	display: block;
}

/*
* html #menu ul li
{
	float: left;
	width: 100%;
}

*+ html #menu ul li
{
	float: left;
	width: 100%;
}
*/
--

HTML:
--
<div id="menu">
<ul>
	<li>
		<h3 class="active">Home</h3>
	</li>
</ul>
<ul>
	<li>
		<h3>Service</h3>
		<ul>
			<li><a href="service-1.php">1</a></li>
			<li><a href="service-1.php">2</a></li>
			<li><a href="service-1.php">3</a></li>
		</ul>
	</li>
</ul>
<ul>
	<li>
		<h3>Referenzen</h3>
		<ul>
			<li><a href="referenzen-1.php">1</a></li>
			<li><a href="referenzen-2.php">2</a></li>
		</ul>
	</li>
</ul>
<ul>
	<li>
		<h3>Kontakt</h3>
	</li>
</ul>
</div>
--