CSS dropdown menu doesn't work in IE9 and lower
Question
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?
1 answers
solution1
0 2014-09-24 14:43:08
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..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.