Member Avatar for daviddoria

I finally got my navigation drop down menu working!

I had been testing in Chrome, Firefox, and IE8. Before my celebration even really started, a user pointed out (correctly) that it doesn't work in IE7 :( The menus drop down on hover, but they aren't aligned, and you can't click on any of the menu items. Does anyone know why this would happen/how to fix it?

Thanks,

David

  • 2 Contributors
  • 1 Reply
  • 201 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by maryparker

Dani AI

Generated

Nice progress getting the dropdown to work in modern browsers. The IE7 symptoms you describe (misaligned submenu and items visible but not clickable) usually trace to one of a few causes; ’s note about standards mode was a good start, but also check stacking, layout and clipping issues — those are the common culprits in IE7.

Quick checklist and targeted fixes:

  • Confirm the page is rendering in standards (not quirks) mode — a missing DOCTYPE will move and size boxes differently and break absolute positioning.
  • Look for any ancestor with overflow other than visible that could be clipping the absolutely positioned submenu; moving the submenu out of that container or making the ancestor overflow: visible for testing helps isolate this.
  • Ensure each LI creates a positioned context and the submenu has an explicitly high stacking order. Example:
    #mainNav li { position: relative; }
#mainNav .submenu { position: absolute; top: 100%; left: 0; z-index: 9999; }
  • Trigger IE’s layout engine on problem elements (IE6/7 “hasLayout”) — a small rule like zoom: 1 on the parent LI often fixes strange alignment or hit‑testing problems:
    /* safe, small IE layout trigger */
#mainNav li { zoom: 1; }

If CSS-only hover is unreliable in that environment, add a tiny JS fallback that toggles a class on hover so the submenu is shown reliably in IE7:

<script>
(function(){
  var m = document.getElementById('mainNav');
  if (!m) return;
  var lis = m.getElementsByTagName('li');
  for (var i=0;i<lis.length;i++){
    lis[i].onmouseover = function(){ this.className = (this.className||'') + ' hover'; };
    lis[i].onmouseout  = function(){ this.className = (this.className||'').replace(/\s*hover\b/,''); };
  }
})();
</script>

#mainNav li.hover > ul { display: block; }

Quick debug trick: temporarily outline elements to spot an invisible overlay:

* { outline: 1px dashed red !important; }

Use an IE7-targeted stylesheet (conditional comments) for any one-off tweaks. These steps cover the most common IE7 failures without rewriting the whole menu.

Member Avatar for maryparker

You can try this. IE doesn't understand :hover links it incorrectly uses :active instead so it's possible that by adding an active rule to the hover rule you might get your dropdowns to drop. So add the active rule after the hover one like this: div#menu ul li:hover ul, div#menu ul li:active ul {display: block;} It's the same way, if you have any other hover rules you need to add an active version afterwards. You never know, that might work. Let us know what happens (or doesn't).

If you're using CSS for anything except font colouring you absolutely must use a DOCTYPE - browser behaviour is very unpredictable without it. In your case, I'd go for this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Add that in before everything else right at the top of the page. With that in place all good browsers plus IE6 & 7 will be using "Standards" mode and will be much closer together in the way they show the page.

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.