CSS下拉菜单在IE9及更低版本中不起作用
[英]CSS dropdown menu doesn't work in IE9 and lower
问题描述
Can anyone else please help? 
有人可以帮忙吗？ I've been reading loads of different questions about dropdown menus in IE, and they're all completely different. 我一直在阅读有关IE中下拉菜单的不同问题的清单，它们完全不同。 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. 我试图删除所有子选择器和rgba值，并且基本上剥离了尽可能多的CSS3。
I'm having trouble trying to get a CSS dropdown menu to work in IE9 and below. 我在尝试获取CSS下拉菜单以在IE9及以下版本中工作时遇到了麻烦。
Chrome, Firefox and IE 10+ all render this menu correctly. Chrome，Firefox和IE 10+均可正确显示此菜单。 It's a simple, hover and show submenu. 这是一个简单的，悬停并显示的子菜单。 On IE9 and below, the dropdowns just don't appear. 在IE9及更低版本上，下拉列表只是不出现。
I've read about removing -filter and -ms-filter, and z-index and all kinds, none of my CSS features any of this. 我已经读过关于删除-filter和-ms-filter以及z-index和所有其他内容的信息，我的CSS都没有任何功能。
UPDATED CSS: 更新的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. 我已经将HTML5Shiv行添加到头部以尝试使其适用于IE，但尽管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. 不管我做什么，IE9都没有区别。 I've done all that's mentioned here in http://alistapart.com/article/hybrid and IE9 is showing nothing different. 我已经完成了http://alistapart.com/article/hybrid此处提到的所有内容，而IE9显示的内容没有什么不同。 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. 我想我已经明白IE8及以下版本不会在任何不是标签的内容上呈现任何:hover a 。 Is this an absolute 100% certainty? 这是绝对的100％确定性吗？
1 个解决方案
解决方案1
0 2014-09-24 14:43:08
IE9 uses document mode ie8 by default. IE9默认使用文档模式ie8。
Try adding: <meta http-equiv="X-UA-Compatible" content="IE=9"/> in your <head> and make sure you use <!DOCTYPE HTML> 尝试在<head>添加： <meta http-equiv="X-UA-Compatible" content="IE=9"/> ，并确保使用<!DOCTYPE HTML>
This mostly has to do with using :hover on non- elements. 这主要与在非元素上使用：hover有关。
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.. 由于古怪的浏览器资料通常没有明显的答案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.