我正在构建一个下拉菜单。我以前做过很多次,所以我不明白为什么这次不行。任何帮助将不胜感激。
所有版本的 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:hover 正确。我不关心 IE6——但我从没想过 IE7、8 甚至 IE9 会有这个 bug?
有人知道怎么修这个东西吗?即使是黑客,如果它看起来不错?非常感谢!