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"> </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"> </a></li>
<li><a href="#" title="Leguane" alt="Leguane" class="n7"> </a></li>
<li><a href="#" title="Chameleons" alt="Chameleons" class="n8"> </a></li>
<li><a href="#" title="Wirbellose" alt="Wirbellose" class="n9"> </a></li>
<li><a href="#" title="Weitere" alt="Weitere" class="n10"> </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 {
...