Overlapping menu doesn't play nice in IE

I'm attempting to have level3 and beyond of my drop-down menu overlap slightly. It looks great in Firefox, Safari, Chrome, etc. but not IE6/7/8. I've played around with the z-index for different elements, but I have no idea what an appropriate fix for IE might be. I've googled the issue and can't seem to find any solution. Anyone have experience with this before?

The site is based on the Apple Zen template, but that's not significant as it seems to be a CSS compatibility issue.

View the site here:
http://www.atsresources.org/shop

Thank you!

Just a shot. I know from IE that they have a different view on defaults of padding and a, li properties

http://www.atsresources.org/shop/includes/templates/apple_zen/css/stylesheet_header_menu.css

div#dropMenu li a (line 50)

{

display: block;

height: 16px;

padding-top: 5px;

padding-right: 33.3px;

padding-bottom: 5px;

padding-left: 33.3px;

text-decoration: none;

color: #ffffff;

text-align: center;

font-weight: bold;

font-size: 14px;

border-right-width-value: 1px;

border-right-style-value: solid;

border-right-color-value: #ffffff;

border-right-width-ltr-source: physical;

border-right-width-rtl-source: physical;

border-right-style-ltr-source: physical;

border-right-style-rtl-source: physical;

border-right-color-ltr-source: physical;

border-right-color-rtl-source: physical;

}

Did you tweak this property?

good luck

Removing position:relative; from DIV#dropMenu LI seems to fix it here.

@jcdk
I believe #dropMenu li a only controls the initial tabs, not pertaining to level3 of the drop-down.

@stevesh
I tried your suggestion, but the drop-downs are then positioned absolute left, rather than underneath each corresponding tab.

I keep thinking it's a z-index glitch with IE because you'll notice level3's first link is positioned above level2, but the following links in level3 are hiding behind level2. It's the same for level4 hiding behind level3. Why would the first link appear above, but not the others? Again, this only seems to happen in IE6/7/8.

Although the menu was built differently, the proper affect is achieved on the main site at http://www.atsresources.org without any IE issues. So I know it's possible, just need your help :smile:

I got the overlapping problem in both IE and FF, but think I found the fix for you. In you stylesheet_header_menu.css , find this section of code:

div#dropMenu ul.level3, 
div#dropMenu ul.level4, 
div#dropMenu ul.level5, 
div#dropMenu ul.level6, 
div#dropMenu ul.level7,
div#dropMenu ul.level8{
    /*top: 0;*/
    top: 0.3em;
    /*left: 16.8em;  position sub-level right of 1st level */
    left: 13.3em; /* position sub-level over 1st level */
    background:#4f4f4f;
    border-left: 1px solid #444;
    border-top: 1px solid #444;
    margin-left: 45px;
}

and add "margin-left: 45px", as shown above in red. That seemed to fix the problem for me in both IE and FF.

Hope this helps.

@Get Em Fast
Thanks for the tip. I tried implementing the 'margin-left' along with removing 'left' and playing with other measurements, but still no luck.

I would like level3 to overlap level2, but it only seems to work on the top link while the others hide behind.

Anyone else run into this problem with IE? :lookaroun