Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 12.05.2009, 00:05
Benutzerbild von Korasu
Korasu Korasu ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.05.2007
Beiträge: 106
Korasu befindet sich auf einem aufstrebenden Ast
Standard Horizontale Liste mit breiteren Unterpunkten

Hallo,

mal wieder ein Szenario.

Ich habe eine horizontale Liste erstellt wo beim Hover auf die Menüpunkte jeweils eine vertikale Liste erscheint. Nun ist es aber so das die horizontale Liste nun breiter ist als das obere Element, der Menüpunkt.

Ein Bild dazu:


Das die horizontale Liste beim Hovereffekt wieder auftaucht stellt für mich keine Probleme dar. Da sie nun breiter ist als der Menüpunkt zudem sie gehört, springt der Menüpunkt nun aus der Liste, da die breiten der anderen Menüpunkte dagegen konkurieren.

Zudem sollte der Hovereffekt des Menüpunkts solange sichtbar sein wie die Maus auf dem horizontalen Menüpunkt ist.

Wie stell ich das an?

Mal ein Auszug aus meine Code:

HTML-Code:
<ul class="topicnavi">
<li>
<a href="#" title="Schlangen" alt="Schlangen" class="n5">&nbsp;</a>
<ul>
<li><a href="#">Giftschlangen</a></li>
<li><a href="#">Riesenschlangen</a></li>
<li><a href="#">Nattern</a></li>
</ul>
</li>
<li><a href="#" title="Agamen" alt="Agamen" class="n6">&nbsp;</a></li>
<li><a href="#" title="Leguane" alt="Leguane" class="n7">&nbsp;</a></li>
<li><a href="#" title="Chameleons" alt="Chameleons" class="n8">&nbsp;</a></li>
<li><a href="#" title="Wirbellose" alt="Wirbellose" class="n9">&nbsp;</a></li>
<li><a href="#" title="Weitere" alt="Weitere" class="n10">&nbsp;</a></li>
</ul>
HTML-Code:
ul.topicnavi {
float: right;
height: 65px;
margin: 6px 20px 0 0;
display: inline;
}

ul.topicnavi li {
list-style: none;
float: left;
display: inline;
}

ul.topicnavi li a.n5 {
display: block;
width: 101px;
height: 59px;
background: url(../images/reptil/navi_schlangen.jpg) no-repeat;
text-decoration: none;
}

ul.topicnavi li ul {
display: none;
}

ul.topicnavi li:hover ul {
display: inline;
}

ul.topicnavi li a.n5:hover {
background: url(../images/reptil/navi_schlangen_h.jpg) no-repeat;
text-decoration: none;
}

ul.topicnavi li a.n6 {
...
Mit Zitat antworten
Sponsored Links