[HTML/CSS] z-index sub menu werk niet

[rubjo99]

Hoi,

Waarschijnlijk een best wel veel gestelde vraag en google heeft mijn oplossing niet en ik zit nu echt vast.

HTML:

<ul id="menu" class="clear">
                    <li><a href="http://www.site.nl" onFocus="this.blur()">Home</a>
                    </li>
                    <li><a href="/theme/373/?rid=1&tb_name=dikkiedik" onFocus="this.blur()">Boeken en kaarten</a>   
                        <ul class="submenu">
                            <li><a href="http://shop.site.nl/theme/341/?rid=1&amp;tb_name=dikkiedik">Babyboeken</a></li>
                            <li><a href="http://shop.site.nl/theme/340/?rid=1&amp;tb_name=dikkiedik">Boeken</a></li>
                            <li><a href="http://shop.site.nl/theme/344/?rid=1&amp;tb_name=dikkiedik">Blokboekjes</a></li>
                            <li><a href="http://shop.site.nl/theme/345/?rid=1&amp;tb_name=dikkiedik">Prentenboeken</a></li>
                            <li><a href="http://shop.site.nl/theme/338/?rid=1&amp;tb_name=dikkiedik">Schrijfwaren</a></li>
                        </ul>
                    </li>
                    <li><a href="/theme/347/?rid=1&tb_name=dikkiedik" onFocus="this.blur()">Speelgoed</a></li>
                    <li><a href="/theme/335/?rid=1&tb_name=dikkiedik" onFocus="this.blur()">Knuffels</a></li> 
                    <li><a href="/theme/337/?rid=1&tb_name=dikkiedik" onFocus="this.blur()">Feest</a></li>
                    <li><a href="/theme/346/?rid=1&tb_name=dikkiedik" onFocus="this.blur()">Kinderkamer</a></li>
                    <li><a href="/theme/336/?rid=1&tb_name=dikkiedik" onFocus="this.blur()">Cadeau</a></li>
                    <li><a href="/theme/352/?rid=1&tb_name=dikkiedik" onFocus="this.blur()">Overige</a></li>
                </ul>

Dit is hoe het menu is opgebouwd en hier dan de CSS:

Cascading Stylesheet:

/* =============================================================================
   Navigation
   ========================================================================== */

#menu {
    border-top: 1px solid #E7E7E7;
    padding: 15px 0 0 20px;
    margin: -7px 0 0 0;
    letter-spacing: -1px;
}
#menu li {
    background: url('http://i49.tinypic.com/11i2vyc.png') no-repeat -10px -267px;
    float: left;
    position: relative;
    padding: 0 19px;
    margin: 0 20px 0 -20px;
    height: 43px;
}
#menu li a {
    font: 500 20px/30px MundoSansRegular,Myriad Pro,Verdana,Arial,sans-serif;
    color: #4B4B4B;
    font-weight: bold;
}
#menu li a:hover {
    color: #ED1A3D;
    text-decoration: none;
}

/* Submenu
================================================== */
#menu li ul {
    background: -moz-linear-gradient(top,#ED193B 0%,#DF1130);
    background: -webkit-gradient(linear, left top, left bottom, from(#ED193B),to(#DF1130));
    border: 1px solid #D7112F;
    position: absolute;
    display: none;
    clear: left;
    left: 0;
    padding: 5px 0 10px;
    margin: 13px 0 0;
    z-index: 99;
    min-width: 175px;
    -webkit-box-shadow: 0px 2px 5px rgba(000,000,000,0.3);
    -moz-box-shadow: 0px 2px 5px rgba(000,000,000,0.3);
    box-shadow: 0px 2px 5px rgba(000,000,000,0.3);
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -pie-background: linear-gradient(#ED193B, #DF1130);
    behavior: url(/PIE.php);
}
.ie7 #menu li ul,
.ie8 #menu li ul {
    background: #D7112F;
    -webkit-box-shadow: 0; 
    -moz-box-shadow: 0;
    box-shadow: 0;  
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}
#menu li:hover ul {
    display: block;
}
#menu li ul li {
    background: none;
    position: relative;
    left: 0;
    margin: 0;
    padding: 0;
    text-indent: 15px;
    float: none;
    height: auto;
    z-index:1000;
}
#menu li ul li a {
    line-height: 26px;
    font-family: ;
    font-size: 14px;
    color: #FFF;
    font-weight: normal;
    z-index:1000;
}
#menu li ul li:hover  {
    cursor: pointer;
}
#menu li ul li:hover a {
    color: #F8A7B3;
}

Met deze CSS en HTML blijft het menu achter tekst een plaatjes van de content vallen.

Hoe kan ik dit oplossen?

[Bosmonster]

Heb je een uitgeklede testcase waarin de bug zich voordoet, want aan je code hierboven zie ik zo snel geen dingen die problemen op zouden kunnen leveren.

[rubjo99]

Bosmonster schreef op donderdag 21 februari 2013 @ 13:04:
Heb je een uitgeklede testcase waarin de bug zich voordoet, want aan je code hierboven zie ik zo snel geen dingen die problemen op zouden kunnen leveren.

http://shop.dikkiedikwebs.../?rid=1&tb_name=dikkiedik

en dan het menu van boeken en kaarten

[Bosmonster]

Je gebruikt id="wrapper" nu dubbel, dat mag sowieso al niet. Maar je hebt ook vreselijk zitten kutten met z-indexen. Werkelijk overal staan ze op lijkt het wel.

Haal de z-index:10 weg van #wrapper en het is hier opgelost overigens.