其他人可以帮忙吗?我一直在阅读有关 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 和更低版本不会在任何不是 a
标签的东西上呈现任何 :hover
。这是绝对 100% 的把握吗?
最佳答案
IE9默认使用文档模式ie8。
尝试添加:<meta http-equiv="X-UA-Compatible" content="IE=9"/>
在你的<head>
并确保你使用 <!DOCTYPE HTML>
这主要与在非元素上使用 :hover 有关。
由于这主要是古怪的浏览器内容,所以这个答案主要只是一种猜测。由于 quirky-browser-stuff 通常没有明显的答案..
关于CSS 下拉菜单在 IE9 及更低版本中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26019273/