Z-index problem

[artiecoon]

I’ve installed the Multi-level Navigation menu in a site I’m about to launch, located at http://www.6columnas.com/ (that also needs a bit of tweaking at the moment). As you can see, there’s an OpenX banner system right under it. And as you can also see if you try the system, the menus scroll right under the banners if they’re Flash, so I’m afraid there’s a Z-index problem I haven’t been able to fix yet.

Is there a way to tell the menu to slide ‘over’ that banner? TIA.

(edit: here goes the CSS I’m using at the moment:

#suckerfishnav {
    background-color:#5c0911;
    font-size:18px;
    font-family:times,serif;
    font-weight:bold;
    width:960px;
    padding:0;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:25px;
    padding:3px;
    margin:0;
    width:100%;
    }
#suckerfishnav a {
    display:block;
    font-variant:small-caps;
    color:#dddddd;
    text-decoration:none;
    padding:0px 16px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:60px;
    width:101px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    }
#suckerfishnav li li {
    width:99px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:times,serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:80px;
    font-size:12px;
    color:#dddddd;
    }
#suckerfishnav li ul ul {
    margin:-21px 0 0 100px;
    }
#suckerfishnav li li:hover {
    background:#be8a72;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#ffffff;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#ffffff;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#dddddd;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#5c0911;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#be8a72;
    }

)

[imported_Ryan]

Your problem is probably caused by your flash content not being sent to transparent:
https://geek.hellyer.kiwi/forum/http://local … 98#msg6098

[rickmesser]

Hmm. What’s going on with mine? Same problem… kinda. But I don’t have any flash on the page. It’s a javascript slideshow.

#suckerfishnav {
    background:#CC3300;
    font-size: 92%;
    font-family:Tahoma, Geneva, sans-serif;
    font-weight:bold;
    width:90%;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:20px;
    padding:0;
    margin:0;
    width:100%;
    }
#suckerfishnav a {
    display:block;
    color:#fff;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:101px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #890202;
    }
#suckerfishnav li li {
    width: 125pc;
    border-bottom:1px solid #890202;
    border-left:1px solid #890202;
    border-right:1px solid #890202;
    font-weight:bold;
    font-family:Tahoma, Geneva, sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:80px;
    font-size:12px;
    color:#fff;
    }
#suckerfishnav li ul ul {
    margin:-21px 0 0 100px;
    }
#suckerfishnav li li:hover {
    background:#9B2600;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#FABC18;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#FABC18;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#fff;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#CC3300;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#9B2600;
    }

http://www.rickmesser.com/check/

[imported_Ryan]

Rickmesser – that will probably be caused by a z-index problem in the javascripted section. Try increasing the z-index of the dropdowns to fix the problem.

[Author]

Posts