Neues DropDown Menü klappt hinter dem Slider auf

[talktarif.de]

Hallo
ich habe mal 'ne Frage ich baue mein Template gerade um und versuche gerade das "MODUL: jQuery Superfish - horizontale Navigation" auszutauschen (liegt noch unten im Footer).
http://www.erotikartikel24.net
Wie man sieht klappt das Neue Menü im Top unter dem Slider auf, rechts bei denn Boxen legt es sich aber darüber.

Hier mal der CSS Code des Menüs:

Code: CSS  [Auswählen]

ul.ldd_menu{
        margin:0px;
        padding:0;
        display:block;
        height:30px;
        background-color:#cc0066;
        list-style:none;
        font-family:"Trebuchet MS", sans-serif;
        border-top:1px solid #cc0050;
        border-bottom:1px solid #cc0050;
        border-left:10px solid #cc0066;
        -moz-box-shadow:0px 3px 4px #591E12;
        -webkit-box-shadow:0px 3px 4px #591E12;
        -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
        text-decoration:none;
}
ul.ldd_menu > li{
        float:left;
        position:relative;
}
ul.ldd_menu > li > span{
        float:left;
        color:#fff;
        background-color:#cc0066;
        height:30px;
        line-height:30px;
        cursor:default;
        padding:0px 20px;
        text-shadow:0px 0px 1px #fff;
        border-right:1px solid #DF7B61;
        border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
        position:absolute;
        top:30px;
        width:550px;
        display:none;
        opacity:0.95;
        left:0px;
        font-size:10px;
        background: #cc0066;
        border-top:1px solid #EF593B;
        -moz-box-shadow:0px 3px 4px #591E12 inset;
        -webkit-box-shadow:0px 3px 4px #591E12 inset;
        -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
        background-color:#f0f0f0;
        color:#444;
        display:block;
        clear:both;
        padding:15px 20px;
        text-transform:uppercase;
        font-family: Arial, serif;
        font-size:12px;
        text-shadow:0px 0px 1px #fff;
        -moz-box-shadow:0px 0px 2px #777 inset;
        -webkit-box-shadow:0px 0px 2px #777 inset;
        -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
        list-style:none;
        float:left;
        border-left:1px solid #DF7B61;
        margin:20px 0px 10px 30px;
        padding:10px;
}
li.ldd_heading{
        font-family: Georgia, serif;
        font-size: 13px;
        font-style: italic;
        color:#FFB39F;
        text-shadow:0px 0px 1px #B03E23;
        padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
        font-family: Arial, serif;
        font-size:10px;
        line-height:20px;
        color:#fff;
        padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
        -moz-box-shadow:0px 0px 2px #333;
        -webkit-box-shadow:0px 0px 2px #333;
        box-shadow:0px 0px 2px #333;
        background:#AF412B;
}

und hier das Script (ist so in der "general.js.php" abgelegt):

Code: Javascript  [Auswählen]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                                /**
                                 * the menu
                                 */
                                var $menu = $('#ldd_menu');
                               
                                /**
                                 * for each list element,
                                 * we show the submenu when hovering and
                                 * expand the span element (title) to 510px
                                 */
                                $menu.children('li').each(function(){
                                        var $this = $(this);
                                        var $span = $this.children('span');
                                        $span.data('width',$span.width());
                                       
                                        $this.bind('mouseenter',function(){
                                                $menu.find('.ldd_submenu').stop(true,true).hide();
                                                $span.stop().animate({'width':'510px'},300,function(){
                                                        $this.find('.ldd_submenu').slideDown(300);
                                                });
                                        }).bind('mouseleave',function(){
                                                $this.find('.ldd_submenu').stop(true,true).hide();
                                                $span.stop().animate({'width':$span.data('width')+'px'},300);
                                        });
                                });
            });
        </script>

Das Superfish hat sich ja darüber gelegt.

Vielleicht kann mir da ja einer einen Tipp geben?

Linkback: https://www.modified-shop.org/forum/index.php?topic=15123.0

[KitoxX]

Hi,

du musst den "z-index" erhöhen z.B. auf 999 dann ist es ganz oben über dem flash.

Code: CSS  [Auswählen]

ul.ldd_menu .ldd_submenu{
        position:absolute;
        top:30px;
        width:550px;
        display:none;
        opacity:0.95;
        left:0px;
        font-size:10px;
        background: #cc0066;
        border-top:1px solid #EF593B;
        -moz-box-shadow:0px 3px 4px #591E12 inset;
        -webkit-box-shadow:0px 3px 4px #591E12 inset;
        -box-shadow:0px 3px 4px #591E12 inset;
        z-index:999;

Gruss KitoxX

[talktarif.de]

Hallo,

mhhh... habe nun folgendes eingefügt!

Code: CSS  [Auswählen]

z-index:999;

Also in die CSS Stelle des Menüs! Aber das bringt irgendwie gar nichts! Na gut, mäßigen Erfolg. Das Bild liegt aber immer noch über dem Menü ist jetzt mit folgendem Code eingebunden:

Code: CSS  [Auswählen]

z-index:999;

Muss ich irgendwas am Content ändern? Habe mal sowas gelesen, aber nicht kapiert.

THX

[talktarif.de]

Hab's doch noch gefunden. Ist mal logisch, dass es auch an die richtige Stelle muss.   

[sv.brueck]

Hallo erotikartikel24,

Dein Menü sieht super aus, aber Du hast hierfür kein Fallback <noscript> angegeben. Denn wenn man Javascript deaktiviert läuft es nicht.

Des weiteren sehe ich über Firebug, dass Du einen Fehler in der "widget-1.4.gz.js" hast.

Gruß

Sven

[talktarif.de]

Moin
hast du einen Lösungsvorschlag?
Bei mir funktioniert es einwandfrei! und es ist ja auch ein Java-Menü! Habe ich über die "general.js.php" eingebunden.
Wenn ich ja vor und nach dem Menü das hier setze geht's ja gar nicht mehr!

Code: XML  [Auswählen]

<noscript>MENÜ</noscript>

Oder ich bin einfach zu dumm, kapiere nicht wie du das meinst, dass ich das davor setzten soll? für 'ne Lösung wäre ich dankbar!

So habe mir die "gz.js" auch mal kurz aufgemacht weiß nur nicht was du für einen Fehler meinst