Drop down Menu ueber DIV containers

[syrvn]

Hi,

ich habe ein kleines Problem mit meinem drop down menu. Ich habe 3 DIV Container. Im ersten Container befindet sich das drop down menu. Der Container ist relativ schmal so dass, wenn ich das drop down menu mit der Maus öffne, sich die angezeigten Links/Menuepunkte über die beiden darunterliegenenden DIV Container erstrecken. Das hat zur Folge, dass ich nur den ersten link "Link 1" klicken kann. Sobald ich versuche mit der Maus die beiden letzten links "Link 2" und "Link 3" zu klicken wird das drop down menu geschlossen. Ich kann diese also niemals klicken.

Ich beschäftige mich schon seit gestern Abend damit und finde einfach keine Lösung. Das einzige was ich gefunden habe was dieses Problem adressiert ist jQuery aber das möchte ich nicht wirklich benutzen. Ich würde das gerne mittels CSS/HTML lösen. Ich denke man benötigt diesen z-index aber alle Lösungsversuche damit sind gescheitert.

Hier der ausschnitt aus der jQuery homepage:

showOverflowOnHover = false(true, false)

If 'true', then when moused-over, the pane's zIndex is raised and overflow is set to 'visible'. This allows pop-ups and drop-downs to overlap adjacent panes.WARNING: Enable this only for panes that do not scroll!
SEE Working with Drop-Downs and Pop-Ups for more information.
​

Hier nun mein Beispiel. Der Code funktioniert. Ihr könnt euch das Problem direkt anschauen. Vielen Dank für euere Hilfe!

[COLOR=#3b3df5][COLOR=#009292]<[/COLOR][COLOR=#489191]html[/COLOR][COLOR=#97238c]xmlns[/COLOR][COLOR=#000000]=[/COLOR]"http://www.w3.org/1999/xhtml"[COLOR=#009292]>[/COLOR][/COLOR]


[COLOR=#489191][COLOR=#009292]<[/COLOR]head[COLOR=#009292]>[/COLOR][/COLOR]
    
[COLOR=#3b3df5][COLOR=#009292]<[/COLOR][COLOR=#489191]meta[/COLOR][COLOR=#97238c]http-equiv[/COLOR][COLOR=#000000]=[/COLOR]"content-type"[COLOR=#97238c]content[/COLOR][COLOR=#000000]=[/COLOR]"text/html; charset=UTF-8"[COLOR=#009292]></[/COLOR][COLOR=#489191]meta[/COLOR][COLOR=#009292]>[/COLOR][/COLOR]
        
[COLOR=#3b3df5][COLOR=#009292]<[/COLOR][COLOR=#489191]style[/COLOR][COLOR=#97238c]type[/COLOR][COLOR=#000000]=[/COLOR]"text/css"[COLOR=#009292]>[/COLOR][/COLOR]
           
[COLOR=#97238c][COLOR=#489191].navcontainer[/COLOR][COLOR=#000000] {    [/COLOR]width[COLOR=#000000]:[/COLOR][COLOR=#3b37de]auto[/COLOR][COLOR=#000000];    [/COLOR]height[COLOR=#000000]:[/COLOR][COLOR=#3b37de]30px[/COLOR][COLOR=#000000]; [/COLOR]background-color[COLOR=#000000]:[/COLOR][COLOR=#3b37de]green[/COLOR][COLOR=#000000]; }[/COLOR][/COLOR]
            
[COLOR=#97238c][COLOR=#489191].xxx[/COLOR][COLOR=#000000] { [/COLOR]width[COLOR=#000000]:[/COLOR][COLOR=#3b37de]auto[/COLOR][COLOR=#000000]; [/COLOR]height[COLOR=#000000]:[/COLOR][COLOR=#3b37de]5px[/COLOR][COLOR=#000000]; [/COLOR]background-color[COLOR=#000000]:[/COLOR][COLOR=#3b37de]white[/COLOR][COLOR=#000000]; }[/COLOR][/COLOR]
                  
[COLOR=#97238c][COLOR=#489191].yyy[/COLOR][COLOR=#000000] { [/COLOR]width[COLOR=#000000]:[/COLOR][COLOR=#3b37de]auto[/COLOR][COLOR=#000000]; [/COLOR]height[COLOR=#000000]:[/COLOR][COLOR=#3b37de]200px[/COLOR][COLOR=#000000]; [/COLOR]background-color[COLOR=#000000]:[/COLOR][COLOR=#3b37de]red[/COLOR][COLOR=#000000]; }[/COLOR][/COLOR]
            
[COLOR=#97238c][COLOR=#489191].navcontainer ul[/COLOR][COLOR=#000000]{ [/COLOR]list-style[COLOR=#000000]:[/COLOR][COLOR=#3b37de]none[/COLOR][COLOR=#000000]; [/COLOR]margin[COLOR=#000000]:[/COLOR][COLOR=#3b37de]0px[/COLOR][COLOR=#000000]; [/COLOR]padding[COLOR=#000000]:[/COLOR][COLOR=#3b37de]7px 0px 0px 15px[/COLOR][COLOR=#000000]; }[/COLOR][/COLOR]
            
[COLOR=#489191].navcontainer ul ul[COLOR=#000000] { [/COLOR][COLOR=#97238c]display[/COLOR][COLOR=#000000]:[/COLOR][COLOR=#3b37de]none[/COLOR][COLOR=#000000]; }[/COLOR][/COLOR]
            
[COLOR=#489191].navcontainer li:hover>ul[COLOR=#000000] { [/COLOR][COLOR=#97238c]display[/COLOR][COLOR=#000000]:[/COLOR][COLOR=#3b37de]inline[/COLOR][COLOR=#000000]; }[/COLOR][/COLOR]
               
[COLOR=#489191][COLOR=#009292]</[/COLOR]style[COLOR=#009292]>[/COLOR][/COLOR]
             
[COLOR=#489191][COLOR=#009292]</[/COLOR]head[COLOR=#009292]>[/COLOR][/COLOR]
    
    
    
    
[COLOR=#489191][COLOR=#009292]<[/COLOR]body[COLOR=#009292]>[/COLOR][/COLOR]


[COLOR=#3b3df5][COLOR=#009292]<[/COLOR][COLOR=#489191]div[/COLOR][COLOR=#97238c]class[/COLOR][COLOR=#000000]=[/COLOR]"navcontainer"[COLOR=#009292]>[/COLOR][/COLOR]
        [COLOR=#009292]<[/COLOR][COLOR=#489191]ul[/COLOR][COLOR=#009292]>[/COLOR]
            [COLOR=#009292]<[/COLOR][COLOR=#489191]li[/COLOR][COLOR=#009292]>[/COLOR]Links
                [COLOR=#009292]<[/COLOR][COLOR=#489191]ul[/COLOR][COLOR=#009292]>[/COLOR]
                    [COLOR=#009292]<[/COLOR][COLOR=#489191]li[/COLOR][COLOR=#009292]><[/COLOR][COLOR=#489191]a[/COLOR] [COLOR=#97238c]href[/COLOR]=[COLOR=#3b3df5]"#"[/COLOR][COLOR=#009292]>[/COLOR]Link 1[COLOR=#009292]</[/COLOR][COLOR=#489191]a[/COLOR][COLOR=#009292]></[/COLOR][COLOR=#489191]li[/COLOR][COLOR=#009292]>[/COLOR]
                    [COLOR=#009292]<[/COLOR][COLOR=#489191]li[/COLOR][COLOR=#009292]><[/COLOR][COLOR=#489191]a[/COLOR] [COLOR=#97238c]href[/COLOR]=[COLOR=#3b3df5]"#"[/COLOR][COLOR=#009292]>[/COLOR]Link 2[COLOR=#009292]</[/COLOR][COLOR=#489191]a[/COLOR][COLOR=#009292]></[/COLOR][COLOR=#489191]li[/COLOR][COLOR=#009292]>[/COLOR]
                    [COLOR=#009292]<[/COLOR][COLOR=#489191]li[/COLOR][COLOR=#009292]><[/COLOR][COLOR=#489191]a[/COLOR] [COLOR=#97238c]href[/COLOR]=[COLOR=#3b3df5]"#"[/COLOR][COLOR=#009292]>[/COLOR]Link 3[COLOR=#009292]</[/COLOR][COLOR=#489191]a[/COLOR][COLOR=#009292]></[/COLOR][COLOR=#489191]li[/COLOR][COLOR=#009292]>[/COLOR]
                [COLOR=#009292]</[/COLOR][COLOR=#489191]ul[/COLOR][COLOR=#009292]>[/COLOR]
            [COLOR=#009292]</[/COLOR][COLOR=#489191]li[/COLOR][COLOR=#009292]>[/COLOR]
[COLOR=#009292]</[COLOR=#489191]ul[/COLOR]>[/COLOR]
[COLOR=#489191][COLOR=#009292]</[/COLOR]div[COLOR=#009292]>[/COLOR][/COLOR]
    


[COLOR=#489191][COLOR=#009292]<[/COLOR]div[COLOR=#97238c]class[/COLOR][COLOR=#000000]=[/COLOR][COLOR=#3b3df5]"xxx"[/COLOR][COLOR=#009292]>[/COLOR][COLOR=#009292]</[/COLOR]div[COLOR=#009292]>[/COLOR][/COLOR]
    
    [COLOR=#009292]<[/COLOR][COLOR=#489191]div[/COLOR] [COLOR=#97238c]class[/COLOR]=[COLOR=#3b3df5]"yyy"[/COLOR][COLOR=#009292]>[/COLOR] Content [COLOR=#009292]</[/COLOR][COLOR=#489191]div[/COLOR][COLOR=#009292]>[/COLOR]






[COLOR=#489191][COLOR=#009292]</[/COLOR]body[COLOR=#009292]>[/COLOR][/COLOR]
     
[COLOR=#489191][COLOR=#009292]</[/COLOR]html[COLOR=#009292]>[/COLOR][/COLOR]

 

[threadi]

jQuery oder JavaScript an sich ist dafür wirklich nicht nötig.

Mit z-index bist Du auf dem richtigen Weg. Jedoch sehe ich in deinem Code an keiner Stelle den Versuch. Theoretisch müsstest Du das ausklappende Menü innerhalb des umgebenden Menüpunkts absolut positionieren.

Beispiel:

.navcontainer li { position: relative;z-index: 10; }
.navcontainer li ul {
 display: block;
 left: 0;
 position: absolute;
 top: 0;
 z-index: 20;
}
.navcontainer li:hover ul {
 display: block;
}

Weitere Beispiele findest Du auch wenn Du mal nach "css dropdown-menü" suchst.