Member Avatar for edhardt

Hello all,

I have a simple html/css based drop down menu.

It works fine in Chrome, however it doesn't work at all in IE 8.

Does anyone have a fix for this?

The link to the site is:

Thanks for anyone who helps me out!

  • 3 Contributors
  • 4 Replies
  • 213 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

Quick checklist and focused troubleshooting steps that address the common IE8 failure modes (and tie into comments from and ).

Document mode / doctype and compatibility: verify the page is rendering in standards mode. IE8 in Compatibility or Quirks mode will break CSS hover-driven menus. Use the F12 developer tools to confirm Document Mode; add a standards header if needed, for example:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Markup and positioning basics: confirm the submenu UL is nested inside its LI (UL > LI > UL). The parent LI should create a positioning context and the submenu should be absolutely positioned and hidden until hover. A minimal pattern:

nav ul li { position: relative; }
nav ul li ul { display: none; position: absolute; top: 100%; left: 0; }
nav ul li:hover > ul { display: block; }
nav ul li > a { display: block; }

Common pitfalls to check (especially given ’s note about many stylesheets): an ancestor with overflow: hidden will clip the dropdown; a stray z-index or positioned sibling can place the menu behind other elements; specificity or an overriding stylesheet (34 files is a likely culprit) can nullify the hover rules. Use the F12 Styles/Computed panel to toggle rules live and isolate which file is winning.

If standards-mode fixes don’t help, fall back to a tiny IE-only script (Son of Suckerfish-style) or a small conditional-script that adds/removes a hover class to LI on mouseenter/mouseleave; that reproduces the CSS :hover effect in legacy modes without rewriting the whole menu. Also reproduce the menu in a stripped-down test HTML/CSS file (single stylesheet) to isolate the problem before changing production files.

Recommended Answers

All 4 Replies

Member Avatar for JGorard159

Lol, 4 years of professional web design and extensive cross-browser support research have taught me: nothing works right in IE.

Would it be possible to create a Javascript equivalent to run exclusively in IE 8?

Edited by JGorard159
Member Avatar for edhardt

Haha it sure seems that way.

I've been tracking down the bugs in my files and cleaning things up but I may be going with a different design altogether.

Thanks for your input, appreciate the help!

Member Avatar for drjohn

google for "son of suckerfish" or for "superfish", the former is a very VERY small bit of javascritp, 12 lines if I rememebr correctly, which makes css based drop downs or flyout menus work in IE. No need at all to write your own javascript. Superfish is jQuery code that adds a few extra options that son of suckerfish didn't have. It uses the fish part of its name as a tribute to the original code.

Member Avatar for drjohn

Your menu is broken in firefox.

I tried to edit the css, and then noticed that you have 34 stylesheets!!!!!
That is totally ridiculous.

I changed some of the values in the menu css file, but it had no effect, and is probably being overridden by something in the other 33 files or the embedded styles.

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.