Member Avatar for thitay

The drop down menu does not display in IE7 & IE6 and the positioning is also not working correctly.

This page has both issues.

On the following page the positioning is correct:

Suggestions would be much appreciated

  • 2 Contributors
  • 1 Reply
  • 71 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

— since the same menu behaves differently between your two pages, the issue is almost always a CSS stacking/positioning difference in an ancestor element rather than the menu code itself. @diafol’s note that Chrome also places the dropdown partly off-screen points to a positioning/overflow problem (not the old IE SELECT-on-top bug). Start by comparing the DOCTYPE and the nearest positioned ancestors around the nav on the working page vs the broken page.

Quick, practical checklist to narrow it down:

  • Inspect the nav and its parents with a dev tool (F12). Look for position, overflow (especially hidden), and z-index on ancestors.
  • Temporarily set overflow: visible on container elements to see if the menu is being clipped.
  • Ensure the submenu is absolutely positioned relative to a predictable parent (a position: relative wrapper).
  • For IE6/7 layout/z-index quirks, give the wrapper “layout” (e.g. zoom:1) and an explicit z-index.

Try this minimal test (add only for troubleshooting):

#nav-wrapper { position: relative; z-index: 1000; zoom: 1; }
#nav-wrapper ul li ul { position: absolute; top: 100%; left: 0; z-index: 1001; }

If that fixes it, remove rules one at a time to find the real culprit. If you’re still stuck, post the HTML/CSS around the #nav-wrapper (the outermost nav container and its parents) and I’ll point to the exact property to change. For background reading on stacking and positioning, see MDN’s pages on z-index and position and overflow: z-index position overflow.

Member Avatar for Member #120589

The big drop down isn't displaying correctly in Chrome either. It's half way off the screen

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.