Member Avatar for dlr258

I created a drop down nav bar which works fine in FF but wont work in IE

here you can see that the menu loads fine in IE if the nav bar html and css are in their own file with no other html or css


here is the page with the same nav html added into my full site and the nav css added to my full css file and now it doesn't work in IE which indicates to me that something in my css file is causing a conflict, but I don't know what.

here is the link to view my css file - the code for the nav bar begins near bottom under /*Drop Down Nav Menu*/

  • 3 Contributors
  • 3 Replies
  • 242 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by dlr258

Dani AI

Generated

When a CSS dropdown works by itself but fails after being merged into a larger stylesheet, the problem is almost always an interaction between the menu’s positioning and another rule in the site CSS. Common IE-specific culprits are clipped absolute children (overflow on an ancestor), stacking-context/z-index issues, legacy “hasLayout” quirks in old IE, missing positioning context on the parent, and site-wide rules that override submenu visibility.

Practical checklist to diagnose and fix:

  • Inspect computed styles with IE’s dev tools (F12) and watch the submenu element while hovering to see if display, visibility, top/left, overflow or z-index are being changed.
  • Look for overflow: hidden or overflow: auto on any ancestor; that will clip absolutely positioned submenus. Make the nearest relevant ancestor overflow: visible or move the submenu outside that container.
  • Ensure each submenu is absolutely positioned with a positioned parent (e.g., li { position: relative; }). z-index only works as expected when elements are positioned.
  • For legacy IE (6/7) try forcing layout on the parent with zoom: 1; — it often corrects stacking and hover problems. Also confirm the page is rendered in standards mode (valid DOCTYPE) and not IE compatibility mode.

Small, safe snippets to try quickly:

.nav { position: relative; z-index: 1000; zoom: 1; }
.nav ul.submenu { position: absolute; top: 100%; left: 0; z-index: 2000; }
<meta http-equiv="X-UA-Compatible" content="IE=edge">

If supporting very old IE (IE6), remember :hover only works reliably on anchors there; a JavaScript fallback is a pragmatic option (as noted earlier in the thread). When CSS fixes fail, isolate the conflict with a binary-style test: disable half the site CSS, retest, and narrow down the offending rule.

Recommended Answers

All 3 Replies

Member Avatar for Agarsia

maybe use position: fixed
this one is supported by IE since IE 7
about older IE like IE 6 do not have to care, Google or Facebook do neither

Member Avatar for Rajib Ganguly

use java script for drop down menu, it will show in ie6 also, for reference you can see dynamicdrive.com

Member Avatar for dlr258

Thanks Rajib I found a menu on Dynamic Drive that I am using now instead and I have it working fine in both browsers.

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.