0

Can anyone else please help? I've been reading loads of different questions about dropdown menus in IE, and they're all completely different. So I have no basis for mine.

I've tried to remove all child selectors, and rgba values, and basically stripped as much CSS3 out as possible.

I'm having trouble trying to get a CSS dropdown menu to work in IE9 and below.

Chrome, Firefox and IE 10+ all render this menu correctly. It's a simple, hover and show submenu. On IE9 and below, the dropdowns just don't appear.

I've read about removing -filter and -ms-filter, and z-index and all kinds, none of my CSS features any of this.

UPDATED CSS:

nav {width:100%;margin:0 auto;text-transform:uppercase;position:relative;}
#toggleMenu {display:none;font-size:40px;line-height:40px;}
ul.mainmenu { margin: 0; padding: 0; position:relative;}
ul.mainmenu .small {font-size:9pt;}
ul.mainmenu ul { left: -9999em; position: absolute; width:200px; background: #222; margin: 0;     padding: 0; top: 40px;}
ul.mainmenu li.item-173 ul {width:310px;}
ul.mainmenu li.item-118 {text-transform:none;}
ul.mainmenu ul ul { background: #333; }
ul.mainmenu li { display: inline-block; vertical-align: middle; position: relative; }
ul.mainmenu li a, ul.mainmenu li span.nav-header { display: inline-block; vertical-align: middle;     padding: 8px 6px; width:100px; color: #ddd;font-size:10pt; font-weight:normal; line-height:18pt;}
ul.mainmenu ul.nav-child li a {width:200px;}
ul.mainmenu ul.nav-child li a.vehicles {width:300px;}
ul.mainmenu li span.nav-header {cursor:default;}
ul.mainmenu li a:hover,
ul.mainmenu li:hover a,
ul.mainmenu li:hover span { background: #222; }
ul.mainmenu li:hover ul, ul.mainmenu li.focus ul { top: 40px; left: 0;}
ul.mainmenu li ul li:hover ul { top: 40px; left: 300px; }
ul.mainmenu ul li { display: block; padding: 0; }
ul.mainmenu ul li a { display: block; padding: 10px 15px; color:#999; }
ul.mainmenu ul li a.vehicles {text-align:left; padding:20px 15px;}
ul.mainmenu ul li a.vehicles img {float:left;margin-right:10px;}
ul.mainmenu ul li a.vehicles .image-title-description {text-    transform:none;display:block;color:#666;}
ul.mainmenu ul li a:hover,
ul.mainmenu ul li:hover a .image-title-description { background: #333; color:#fff; text-    decoration: none; }
ul.mainmenu ul ul li a:hover { background: #ccc; }

UPDATE:

I have added the HTML5Shiv line into the head to try and get it working for IE, but it hasn't made the dropdowns work, although it has changed the layout slightly in IE8.

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
<![endif]-->

UPDATE:

I really don't get this, as NOTHING seems to be working. There's no difference in IE9 no matter what I try. I've done all that's mentioned here in http://alistapart.com/article/hybrid and IE9 is showing nothing different. The top level of the menu is appearing fine, but the dropdowns just don't show.

I think I've come to a point to understand that IE8 and below won't render any :hover on anything that isn't an a tag. Is this an absolute 100% certainty?

Lee
  • 4,187
  • 6
  • 25
  • 71
  • Do you have an HTML5 shiv? Because without it the `nav` element wont work. If you don't it's a possible duplicate of [this](http://stackoverflow.com/questions/5227331/html5-new-elements-header-nav-footer-not-working-in-ie) in a slightly different context. – DavidT Sep 24 '14 at 14:22
  • No I don't, I've just read up on Wikipedia about that. I'll try adding that into the `head` – Lee Sep 24 '14 at 14:25
  • by adding the line on Wikipedia, doesn't give any different operation to the nav menu, the dropdowns still dont appear. Am I missing anything in my CSS? – Lee Sep 24 '14 at 14:26
  • Update your question with what you have added. – DavidT Sep 24 '14 at 14:27
  • Ok, next is your `` try updating as per [this question](http://stackoverflow.com/questions/6025409/css-child-selector-doesnt-work-on-ie9) as you are using a `>` child selector – DavidT Sep 24 '14 at 14:32
  • Nope, that's made no difference – Lee Sep 24 '14 at 14:34
  • Then Im fresh out of ideas buddy, sorry. Hopefully someone will spot something I haven't. – DavidT Sep 24 '14 at 14:35

1 Answers1

0

IE9 uses document mode ie8 by default.

Try adding: <meta http-equiv="X-UA-Compatible" content="IE=9"/> in your <head> and make sure you use <!DOCTYPE HTML>

This mostly has to do with using :hover on non- elements.

Since this is mostly quirky-browser-stuff, this answer is mostly just a speculation. Since quirky-browser-stuff usually does not have an obvious answer..

Damien Overeem
  • 4,487
  • 4
  • 36
  • 55
  • Is it worth using Internet Explorer's F12 Document Mode to check these? As that's what I'm doing. I've noticed using IE9 settings, it doesn't show, but with IE8, the layout is wrong, but the dropdowns DO work. This is really confusing – Lee Sep 24 '14 at 14:50
  • Okay so I've done both of those things. I've noticed the dropdowns work if I set the dropdown `ul` to `position:relative` or anything other than absolute. The dropdowns show, although the entire nav bar space is enlarged as it provides the space for the dropdowns, even when hidden – Lee Sep 25 '14 at 07:48