Question

我正在构建一个下拉菜单。我以前做了很多次，所以我不明白为什么这次不行。任何帮助将不胜感激。

所有版本的IE拒绝在我的CSS下拉菜单上触发悬停事件。这适用于chrome和FF，但IE7,8和9只会在您将鼠标悬停在链接文本或li上设置的边框时显示下拉菜单。（参见下面的参考资料）。

所以我们不浪费时间，我会提到我的代码中有DOCTYPE。我还将Modernizr用于其他HTML5元素。我试过禁用它，不用了。所有链接都有一个href属性，没有一个是空的，我已经尝试过浮动li ul {}而不是position absolute等等。

这是我的问题的完美解释。不幸的是，他们的“修复”并没有为我解决这个问题：http://www.hopstudios.com/blog/internet_explorer_hover_li_bug_solution/

这是我的CSS。所有这些都在线：http://allgodspeople.org/simplexdemo/

nav {
width: 530px;
float: right;
clear: right;
height: 78px;
overflow: visible;
}

nav * {
zoom: 1;}

nav ul {
margin: 0px;
padding: 0px;
}
nav ul li {
display: block;
float: left;
clear: none;
height: 53px;
list-style-type: none;
padding: 30px 0px;
z-index: 999;
position: relative;
}
nav  a:link, nav  a:visited, nav  a:hover, nav  a:active {
display: block;
float: left;
clear: both;
color: #ffffff;
height: 23px; /*important for submenu positioning*/
text-decoration: none;
font-family: bebas;
padding: 0px 8px 0px;
margin: 0px;
}
nav ul li a {
height: 73px;
margin-top: -30px;}
nav li a:hover {
color: #e57914;
text-decoration: underline;
}
nav li.active a {
color: #e57914 !important;
}

/*Dropdown styles*/
nav li ul {
display: none;
float: left;
clear: both;
background: #444444;
border-radius: 0px 0px 4px 4px;
padding: 0px;
margin: 0px;
overflow: hidden;
position: absolute;
top: 73px;
z-index: 999;
width: 200px;}
nav li:hover ul , nav li.hover ul{
display: block;}/*trigger the dropdown*/
nav li ul li {
background-color: #444444;
display: block;
float: left;
clear: both;
height: auto;
min-height: 23px;
padding: 0px 0px;
overflow: hidden;}
nav li ul a:link, 
nav li ul a:visited, 
nav li ul a:hover, 
nav li ul a:active {
display: block;
background-color: #444444;
color: #ffffff;
padding: 6px 15px;
margin: 0px;
width: 160px;
min-width: 160px;
margin: 0px;}
nav li ul a:hover {
background: #284f66;
color: #e57914;
text-decoration: none;}
nav li ul li:last-of-type a {
border-radius: 0px 0px 4px 4px;}

PS。我也在那里@charset "UTF-8"。

我一直在研究这几个小时，花了几个小时在IE检查员中愚弄它，并且发现了很少有记录的例子，没有一个解决了我的问题。我知道IE6不支持li：正确悬停。我不关心IE6 - 但我从未想过IE7,8甚至IE9会有这个bug吗？

任何人都知道如何解决这个问题？即使是黑客，如果它看起来不错？非常感谢！

Answer 1

修复？重写菜单样式。我仍然不知道出了什么问题，只是当我重写我的菜单样式时它就消失了。我最好的猜测是，我将<nav>标记切换为<div id="navigation">标记，并更新了CSS。

非常感谢大家！

IE7-9悬停在下拉菜单上未检测到

1 个答案: