Question

其他人可以帮忙吗？我一直在阅读有关IE中下拉菜单的大量不同问题，而且它们完全不同。所以我没有我的基础。

我试图删除所有子选择器和rgba值，并且基本上尽可能地删除了CSS3。

我在尝试使用CSS下拉菜单在IE9及以下版本中工作时遇到了麻烦。

Chrome，Firefox和IE 10+都能正确呈现此菜单。它是一个简单的悬停和显示子菜单。在IE9及以下版本中，下拉列表不会显示。

我已经阅读了有关删除-filter和-ms-filter以及z-index和各种类型的内容，但我的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; }

更新：

我已经将HTML5Shiv行添加到头部以尝试使其适用于IE，但它没有使下拉列表工作，尽管它在IE8中稍微改变了布局。

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

更新：

我真的不明白，因为似乎没有工作。无论我尝试什么，IE9都没有区别。我已经完成了http://alistapart.com/article/hybrid中提到的所有内容，IE9显示没有什么不同。菜单的顶层显示正常，但下拉菜单显示不正确。

我认为我已经明白IE8及以下版本不会在任何不属于:hover代码的内容上呈现a。这绝对是100％的确定性吗？

Answer 1

IE9默认使用文档模式ie8。

尝试在<meta http-equiv="X-UA-Compatible" content="IE=9"/>中添加：<head>，并确保使用<!DOCTYPE HTML>

这主要与使用有关：悬停在非元素上。

由于这主要是古怪的浏览器，这个答案大多只是一种推测。因为古怪的浏览器东西通常没有明显的答案..

CSS下拉菜单在IE9及更低版本中无效

1 个答案: