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>
--
_______________________________________________
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
