|
|||
Dropdown Navigation - 2. Ebene ein-/ausblenden
Hallo zusammen,
ich habe eine 2-stufige Navigation: NLP Wenn ein Untermenüpunkt aktiv ist, soll das Untermenü stehen bleiben. Beim Hover über einen Hauptmenüpunkt soll das aktive Untermenü ausgelendet werden und das entsprechende beim Hover auf einen Hauptmenüpunkt eingeblendet werden. Jedoch hab ich jetzt ein Konflikt im CSS, da das aktive Untermenü nicht mehr angeklickt werden kann. Hat einer eine Idee wie ich das eleganter Lösen könnte? Evtl. ist mein Denkansatz auch falsch Code:
/*.................. NAVI ..................*/ #navi ul{ /* Menü 1. Ebene */ list-style:none; font-family:verdana; font-size:11px; text-transform:uppercase; margin:0px; padding:0; position:absolute; margin:146px 0 0 10px; z-index:9999; } #navi ul li { /* Submenü 1. Ebene */ float:left; line-height:35px; margin:0; margin-right:10px; } #navi a{ /* Links 1. Ebene*/ display:block; padding:10px 8px 5px 8px; height:36px; color: #333939; text-decoration:none; } #navi li:hover a{ background: url(/tl_files/playground/theme/bg_navi_hover.png) center top no-repeat; text-decoration:underline; color:#33b8cc; } #navi li .active, #navi li .trail { background: url(/tl_files/playground/theme/bg_navi_active.jpg) center top no-repeat; color:#fff; font-weight:bold; display:block; padding:10px 8px 5px 8px; height:41px; } #navi ul li ul { /* Menü 2. Ebene ausblenden */ display:none; top:47px; margin:0; padding-top:6px; text-transform:none; } #navi ul li:hover ul{ /* Submenü 2. Ebene einblenden */ display:block; } #navi ul li ul li { /* Submenü 2. Ebene */ float:none; border-left:1px solid #efefef; border-right:1px solid #efefef; border-bottom:1px solid #efefef; line-height:35px; background:#fff; float:left; margin-right:0; } #navi ul li ul li a, #navi li:hover ul li a{ /* Links 2. Ebene */ padding:0 5px 5px 5px; height:30px; color:#333939; text-decoration:none; } #navi li ul .active, #navi li ul li .trail { /* Aktiver Link 2. Ebene */ height:30px; background:#fff; padding:0 5px 5px 2px; color:#33b8cc; } #navi li.trail ul { /* Aktives Submenü eingeblendet lassen*/ display:block } #navi ul:hover li.trail ul { /* Ausblenden aktives Submenü wenn hover über anderer Haupt-Menüpunkt*/ display:none } #navi ul li ul li a:hover { text-decoration:underline; color:#33b8cc; } Grüße img Geändert von img (17.12.2010 um 00:01 Uhr) |
Sponsored Links |
|
|||
Hi,
war meine Frage unlogisch gestellt oder ist es tatsächlich nicht so einfach? Ich komm leider nicht weiter... meine Idee war dem aktiven Submenü (ul) einfach eine eigene Klasse zuweisen und dann für diese den display:none wieder rauszunehmen... aber ich hab leider keine Möglichkeit das so umzusetzen da ich die Klassen nicht manuell zuweisen kann. Vielleicht hat jemand ja noch eine Idee wie es mit dem aktuellen Quellcode funktionieren könnte. Viele Grüße Geändert von img (17.12.2010 um 00:01 Uhr) |
Sponsored Links |
|
||||
Du beeinflusst mehrfach die erste Ebene durch :hover
nämlich mit: #navi li:hover a{ #navi ul li:hover ul{ /* Submenü 2. Ebene einblenden */ #navi ul li ul li a:hover { Lies' dir mal den Artikel hier durch: Quick Tip: Understanding CSS Specificity | Nettuts+ PS: Das alles ginge mit sehr viel weniger Code durch die Nutzung von ">" Grüßel, Christoph
__________________
Ich bin keine Signatur, ich putz hier nur |
|
|||
Danke für deine Antwort.
Der Beitrag war sehr interessant, das war mir bisher nicht bekannt Trotzdem sehe ich leider nicht, wie mir die Gewichtung von IDs bzw Klassen hier weiterhilft. Ich habe leider nicht die Möglichkeit, manuell auf die Klassen bzw. IDs einzuwirken, ich kann auch zusätzlich keine hinzufügen. Ich habe hier l lediglich #menu und dann die verschachtelten Listen ohne weitere Klassen/IDs. Elegant ist mein CSS tatsächlich nicht möchte es aber erstmal hinbekommen, dass es passt. Anschließend bekommt es eine Schlankheitskur... Danke trotzdem für deine Antwort. Geändert von img (17.12.2010 um 00:01 Uhr) |
|
|||
OK, Danke. Das muss ich mir heute Abend nochmal in Ruhe anschaun.
Wie nennen sich die Operatoren wie > , habe ich bisher nie benutzt. Hast Du da zufällig eine Quelle? Grüße Geändert von img (17.12.2010 um 00:02 Uhr) |
|
||||
Google "Kindselektor". Ist aber nur interessant, falls der IE < 7 egal ist.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
OK danke für die Infos. Habe das Problem jetzt anders gelöst (bzw. erstma nicht gelöst). Das Menü wurde nochmal anders strukturiert und jetzt ergibt sich das Problem nicht mehr.
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |
Dropdown Hover 3.Ebene klappt nicht auf | Maztah | CSS | 0 | 22.03.2008 23:35 |
Probleme mit einem CSS-Menü (UL-Liste)! | hagbard_2605 | CSS | 0 | 21.10.2006 11:03 |