0

I'm adding a new dropdown div to an existing WordPress theme with it's own dropdown menu.

The new dropdown is activated and "dropping down" from an area above the menu.

The menu is set to z-index:99, but whatever value i give "my dropdown", the menu still appears on top of it.

Only exception is if i give the menu z-index:0, then all works fine except that the menu's dropdowns, of course, does not overlap items further down the page :/

Help appreciated!

Update: I have tried different position values, the menu needs to be "relative" to work.

The dropdown is now absolute, but relative gives the same result.

jonas
  • 620
  • 1
  • 6
  • 14

3 Answers3

1

You have the following declared in your styles.css stylesheet on line: 316:

#section-tophat, #section-footer, #section-sub-footer { position: relative;  z-index: 1;  } /* Setup for :after double bgs below */

You're setting your #section-tophat to z-index:1 and thus at a lower level than your menu, so just remove your #section-tophat id from that line and your dropdown works fine.

Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • Thanks a lot, you're a hero! Didn't write this Css myself and for some reason i missed that when looking in Firebug :) – jonas Apr 12 '12 at 15:31
0

z-index only work on position relative, absolute & fixed. So, give position:relative to your dropdown DIV.

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • Thank you. That have solved such problems before so i a already tried both relative & absolute with no luck... The menu is position:relative, and that can't be changed without breaking the theme... – jonas Apr 12 '12 at 13:44
0

Do you have an example page that we can check? You also may have stacking context issues.

Check my answer about how z-index works.

Community
  • 1
  • 1
Frank van Wijk
  • 3,234
  • 20
  • 41