zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Horizontale Liste mit breiteren Unterpunkten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.05.2009, 23:05
Benutzerbild von Korasu
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
  #2 (permalink)  
Alt 12.05.2009, 08:46
Benutzerbild von philosapiens
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 08.05.2009
Ort: Berlin Südende
Beiträge: 297
philosapiens befindet sich auf einem aufstrebenden Ast
Standard

Hi,

sorry, aber selbst nach dem fünften Mal des Lesens Deiner Frage habe ich nicht verstanden, was Du gerne möchtest.

So wie in der oberen Graphik soll es aussehen und so wie in der zweiten sieht es aus? Oder wie?

Hättest Du vielleicht sogar noch einen Link zur Seite?
__________________
Der höchste Lohn für unsere Bemühungen ist nicht das, was wir dafür bekommen, sondern das, was wir dadurch werden.

Mein aktuelles Projekt bei idealseiten.de
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.05.2009, 09:00
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Nimm mal die 101px Breite für a raus und vergib ul ul 100% Breite.

Ansonsten wäre ein Blick in Stu Nicholls Menüs eine Anregung.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #4 (permalink)  
Alt 12.05.2009, 09:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Solche Submenüs sollte man mit position: absolute; erstellen, damit der andere Inhalt nicht springt, sobald das Menü erscheint.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Horizontale Liste mit Dropdown zentrieren Amnesys (X)HTML 4 13.10.2010 08:53
horizontale liste - zeilenumbruch geht nicht outofrulez CSS 10 01.04.2010 14:13
horizontale navigation - liste rückt nach oben?! velvetia CSS 2 13.03.2008 01:28
Horizontale Liste positionieren suni CSS 28 10.11.2007 23:23
Horizontale Liste: "list-style-type:none" nötig? Steakfred CSS 1 03.11.2007 17:47


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:47 Uhr.