Drop downs being covered up by google ads in foreground

[hokieglenn]

I’m having problem with drop downs appearing behind some google ads at the top of my blog.  This only happens in IE, not FF.

I read below tha the z-index command can fix this in the CSS, but this has not worked for me.

Help!

Here is my site: http://www.virginiatechfan.com/

My CSS

#suckerfishnav {
    background: none;
    font-size:12px;
    font-family:arial,helvetica,sans-serif;
    padding-top:12px;
    font-weight:bold;
    width:100%;
    text-transform:uppercase;
    z-index:1000;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:25px;
    padding:0,0,0,0;
    margin:0;
    width:100%;
    z-index:1000;
}
#suckerfishnav a {
    display:block;
    color:#4c0a00;
    text-decoration:none;
    padding:0px 10px;
    z-index:1000;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:201px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    z-index:1000;
}
#suckerfishnav li li {
    width:199px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:helvetica,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:200px;
    font-size:12px;
    color:#4c0a00;
    }
#suckerfishnav li ul ul {
    margin:-21px 0 0 100px;
    }
#suckerfishnav li li:hover {
    background:#f3f2e5;
    }
#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:#4c0a00;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#f3f2e5;
    }
#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:#f3f2e5;
    }
#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:#4c0a00;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#4c0a00;
    }
Multi-level Navigation CSS Generator
Posted on Mar 7th 2008 by Ryan.
Implementation

[arjanver]

in which version of IE? seems to work propperly in IE 7.

[Vistronic]

I have used the Z index to fix a simuliar problem where did you put it? at what number?

[hokieglenn]

I put the z-index in several places in the CSS (actually under the first 3 sections, see above) and I set it to 1000.  Not sure why its not working, I had to remove the adsense ads.

[imported_Ryan]

Google ads code to Adsense which prevents hovered blocks from appearing on top of it. It’s a pain in the neck.

[swaggers]

http://www.swearingatvideogames.com

I wanted to put a leaderboard ad under the nav but the google ad appears on TOP of the menu items so they can’t be selected. Does anyone know a way around this?

I have removed the ad since it made navigation immpossible.

[imported_Ryan]

Google intentionally forces their ads on top of :hover’d blocks. There is no work around for this and if there was it would likely put you in breach of the Adsense TOS.

[Anonymous]

hey i have the same problem on http://www.crossfire-germany.de

i have a navigation with the <ul> tags same like the one who started this thread….

and my slideshow is macromedia flash and gets in front of the drop down navigation _._ can somebody please help me? ” title=”Sad” />

greez

[imported_Ryan]

Like I said, Google ads code prevents hovered blocks from appearing on top. AFAIK think there is no way around this problem and even if there was you would probably be in violation of Google’s TOS.

[Anonymous]

Hello, I have the problem that the submenu is heavier than adsense advertising block, so the menu options are shown below adsense.
Here we give you an example of what happens to me.
http://www.vettavisen.no/category/nyheter/jus/

thanks

[imported_Ryan]

Adsense intentionally causes it’s advertisements to appear on top of dropdowns. It is against their TOS to attempt to get around it. Plus I have no idea how to get around it anyway (I haven’t bothered trying since they don’t allow it).

[Deepak]

Recently solved this problem, Follow 3 easy steps……

1) Just add  [b:1vitwkwb].adbanner{  z-index: 5 }[/b:1vitwkwb] in your site CSS

2) Add  z-index:1 in PixoPoint Multi-level CSS code as specify below
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:14px;
    padding:0;
    border:1px solid #aaa;
    margin:0;
    width:100%;
    [b:1vitwkwb]z-index: 1[/b:1vitwkwb]
    }

3) edit pade code to
[b:1vitwkwb]<div class="adbanner">
(google ads here) 
</div>[/b:1vitwkwb]

Enjoy
I got successful doing on site http://www.forangelsonly.org[/url:1vitwkwb%5D

[Deepak]

Recently solved this problem, Follow 3 easy steps……

1) Just add  [b:34um2fw8].adbanner{  z-index: 5 }[/b:34um2fw8] in your site CSS

2) Add  z-index:1 in PixoPoint Multi-level CSS code as specify below
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:14px;
    padding:0;
    border:1px solid #aaa;
    margin:0;
    width:100%;
    [b:34um2fw8]z-index: 1[/b:34um2fw8]
    }

3) edit pade code to
[b:34um2fw8]<div class="adbanner">
(google ads here) 
</div>[/b:34um2fw8]

Enjoy
I got successful doing on site http://www.forangelsonly.org[/url:34um2fw8%5D

[Deepak]

Recently solved this problem, Follow 3 easy steps……

1) Just add  [b:tu4az85s].adbanner{  z-index: 5 }[/b:tu4az85s] in your site CSS

2) Add  z-index:1 in PixoPoint Multi-level CSS code as specify below
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:14px;
    padding:0;
    border:1px solid #aaa;
    margin:0;
    width:100%;
    [b:tu4az85s]z-index: 1[/b:tu4az85s]
    }

3) edit pade code to
[b:tu4az85s]<div class="adbanner">
(google ads here) 
</div>[/b:tu4az85s]

Enjoy
I got successful doing on site http://www.forangelsonly.org[/url:tu4az85s%5D

[imported_Ryan]

That is against the Google TOS apparently. They don’t allow you to obscure their ads in any way.

[Author]

Posts