Probleme mit ausklappmenü und Coinslider

Hallo,

habe im Moment ein Design wo ich ein Klappmenü einsetze welches nach unten ausklappt.

Beides liegt im HEADER

Code:

---

#mainmenu
{
        padding-top:180px;
}
#mainmenu ul.level_1
{
        width:960px;
        height:54px;
        border-right:1px solid #999;
}
#mainmenu li
{
        float:left;
        line-height:1;
}
#mainmenu li.login,
#mainmenu li.register
{
        float:right;
}
#mainmenu a,
#mainmenu span
{
        display:block;
        padding:8px 18px 10px;
        border-right:1px solid #999;
        text-decoration:none;
        color:#f6f6f6;
}
#mainmenu a:hover,
#mainmenu span,
#mainmenu a.trail
{
        background-color:#8c8c8c;
        color:#fff;
}
#mainmenu li.login a,
#mainmenu li.login span,
#mainmenu li.register a,
#mainmenu li.register span
{
        border-left:1px solid #999;
        border-right:0;
}
#mainmenu .level_1 ul
{
        width:160px;
        left:-999em;
        position:absolute;
        margin-bottom:0;
        background-color:#808080;
        border:1px solid #999;
}
#mainmenu .level_2 ul
{
        margin:-27px 0 0 160px;
}
#mainmenu .level_2 li
{
        float:none;
        background:none;
}
#mainmenu .level_2 a,
#mainmenu .level_2 span
{
        padding-top:6px;
        padding-bottom:8px;
        border-right:0;
}
#mainmenu .level_2 a.submenu,
#mainmenu .level_2 span.submenu
{

}
#mainmenu li:hover .level_2,
#mainmenu .level_2 li:hover .level_3,
#mainmenu .level_3 li:hover .level_4
{
        left:auto;
}

#submenu h1,
#submenu ul.level_1 ul
{
        margin-bottom:0;
}
#submenu a,
#submenu span
{
        display:block;
        padding-top:6px;
        padding-bottom:6px;
        border-bottom:1px dotted #ddd;
        text-decoration:none;
}
#submenu a:hover
{
        text-decoration:underline;
}
#submenu a.trail
{
        color:#444;
}
#submenu .level_2 li
{
        padding-left:18px;
}

---

Jetzt habe ich aber unter dem Menü die Erweiterung Coinslider laufen.

Problem ist dass das second lvl was ja nach unten ausklappt, unter den Coinslider rutscht.

Ich weiss dass ich mit z-index das Problem eigentlich in den Griff bekommen sollte.
Funktioniert aber nicht wirklich.
Ich habe dem second lvl schon "z-index: 999;" gegeben, das bewegt aber überhaupt nichts.

Spaßeshalber habe ich dem coinslider einen "z-index: -1;" gegeben. Natürlich funktioniert dann das Menü aber leider der Coinslider nichtmehr, da ich ja nichts anklicken kann was ja auch logisch ist.

Wie bekomme ich das menü über den coinslider, damit beides funktioniert bzw. wo muss ich ansetzen.

Hi,

manchmal hilfts, zum z-index noch zusätzlich ein position:relative; zuzufügen. Und/oder den übergeordneten Selektoren, in deinem Fall #mainmenu, auch einen höheren z-index als dem Slider zu geben. (der IE braucht das zB manchmal)

Grüsse,
Chris

http://www.contao-community.de/showt...333#post136333

Probier mal so:

Code:

---

div#mainmenu ul
{
    z-index:1000000;
}

---

Und falls das nicht klappt, was es eigentlich sollte, schau am besten mit Firebug, ob die Zuweisung womöglich durch irgendein anderes Element per Vererbung außer Kraft gesetzt wird.

Ja, das mit dem IE stimmt, der kann sich verschlucken, wenn ein Element kein sog. "HasLayout" hat, so ne proprietäre Microsoft-Geschichte. Dazu findest Du mit Google diverse aufschlussreiche Infos.

Hallo,

vielen Dank für die Anregungen.
Leider scheint der Coinslider doch recht Dominant zu sein in Sachen z-index.
Ich habe jetzt mittlerweile 5-6 Lösungsansätze ausprobiert, aber komme leider nicht zu dem gewünschten Ergebnis.

Alternativ habe ich es mit einem eigenen Layoutbereich versucht, welcher direkt unter dem Header liegt. Bekomme exakt dasselbe Problem. Deswegen hab ichs wieder umgebaut.

Das Projekt selber ist jetzt nicht hochdringend und ich könnte sicher auch einen anderen Slider nehmen, aber allein schon aus Prinzip will ich dieses Problem lösen.
Werde mich über das lange Wochenende nochmals speziell diesem Problem widmen und gebe euch dann hier wieder mein Feedback.