Member Avatar for EvolutionFallen

I'm trying to use the Son of Suckerfish dropdown menu to make the drop-down menu for a site I'm working on. The dropdown looks fine in FF3, but on IE7 (the only other browser I've tested it on so far) it's got some problems.
I've posted an example of the drop-down menu here:

If you're using IE7, mouse over the "Listen" menu. The first problem you'll probably notice is that there's way too much white space under "Jazz". It's actually the same amount of space that the Jazz submenu takes up. If you mouse over "Jazz", you'll also notice that the submenu starts further down than it should.

The other problem is that for some reason, the <h2> subtitle shows through the menu, and I can't seem to tuck it back behind it.

If anyone could point out what I'm doing wrong, I'd greatly appreciate it. Also, if you have any suggestions for a different multi-level drop down menu that I should use instead, please let me know.

Thanks,
EF

  • 1 Contributor
  • 1 Reply
  • 127 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by EvolutionFallen

Dani AI

Generated

Small, practical checklist and fixes for the IE7/IE8 symptoms you describe (). The two distinct problems (extra whitespace/offset for the nested submenu, and the H2 rendering above the menu) usually come from positioning/stacking-context differences in old IE and from markup/CSS that some browsers tolerate but IE treats differently.

Try these steps in order (quick to test and usually effective):

  1. Validate the markup and DOCTYPE. Nested submenus must be inside their parent LI. Quirks mode (missing/old DOCTYPE) will break percent/absolute positioning in IE.
  2. Make sure each parent LI that has a submenu is positioned; the submenu must be absolutely positioned relative to that LI. Example rules to add or check (adjust selectors to match your markup):
/* put these on your menu container and LIs */
#nav { position: relative; z-index: 1000; }
#nav li { position: relative; zoom: 1; }   /* zoom:1 triggers hasLayout in IE6/7 */
#nav li ul { position: absolute; top: 100%; left: 0; z-index: 1001; background: #fff; }

  1. The H2 showing through is a z-index/stacking-context issue. z-index only works on positioned elements in IE; give the menu container a position and a higher z-index than the H2. If the H2 still overlaps, temporarily add borders/backgrounds to see stacking order and use IE dev tools to inspect computed z-index. The zoom:1 hack on the menu or its LIs often fixes odd IE stacking behavior because it gives elements "hasLayout."

  2. Debug technique: add visible outlines/backgrounds to the UL/LI and nested UL while testing. If the nested UL is still reserving space (causing that white gap), it is not being removed from normal flow — check that position:absolute is actually applied and that no CSS rule (cascade/specificity) is overriding it.

If you want a more robust ready-made option, Superfish (a jQuery enhancement of the Suckerfish pattern) handles a lot of cross-browser quirks for multi-level menus. For background on stacking contexts and z-index behavior see MDN z-index.

Member Avatar for EvolutionFallen

Tested this in IE8. The h2 doesn't show on top of the dropdown, but the large white space is still there under "Jazz", and the submenu is still too low.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.