css - 如何修复 IE9 的悬停伪类

标签 css

我知道这是一个典型的问题,但我找不到解决方案。我的 CSS 下拉菜单在任何地方都可以正常工作,但 IE9 除外。下拉列表在 IE9 中根本不起作用。有什么建议吗?谢谢。

这是菜单 HTML:

<div id="menu">
<ul> 
  <li><a href="#"><span>Needs Assessment</span></a>
    <ul> 
      <li><a href="#">History1</a></li> 
         <li><a href="#">Team1</a></li> 
         <li><a href="#">Offices1</a></li> 
    </ul> 
  </li>

  <li><a href="#"><span>Design and Development</span></a>
    <ul> 
         <li><a href="#">History2</a></li> 
     <li><a href="#">Team2</a></li> 
         <li><a href="#">Offices2</a></li> 
    </ul> 
  </li>

  <li><a href="#"><span>Prepare and Implement</span></a>
    <ul> 
         <li><a href="#">History3</a></li> 
         <li><a href="#">Team3</a></li> 
         <li><a href="#">Offices3</a></li> 
  </ul> 
 </li>

 <li><a href="#"><span>Debrief and Measure</span></a>
   <ul> 
        <li><a href="#">History4</a></li> 
        <li><a href="#">Team4</a></li> 
        <li><a href="#">Offices4</a></li> 
   </ul> 
</li>

<li><a href="#"><span>Resources</span></a>
  <ul> 
    <li><a href="#">History4</a></li> 
    <li><a href="#">Team4</a></li> 
    <li><a href="#">Offices4</a></li> 
  </ul> 
</li>

</ul>
</div>

这是我为这个菜单编写的 CSS:

#menu {
    width: 942px;
    height: 47px;
    border: solid 0px #000;
}

#menu ul {
    margin-left: 0px;
    padding-left: 0px;
}

#menu ul li {
    position: relative;
    display: inline;
    float: left;
    list-style: none;
}

#menu li ul {
    position: absolute;
    margin: 0px;
    padding: 0px;
    display: none;
}

#menu li:hover ul { 
    display: block;
    z-index: 999;
}

#menu li li a {
    color: #fff;
}

#menu li li a:hover {
    color: #ccc;
}

#menu ul li a {
    display: block;
    width: 188px;
    padding: 12px 0px 10px 0px;
    background:url 'http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png');
    border: solid 0px black;
    font-family: 'Cabin', sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    text-align: center;
}

#menu a span {
    float: left;
    display: block;
    padding: 3px 5px 4px 6px;
    color:#fff;
    float: none;
    border: solid 0px black;
}

#menu a:hover span {
    color:#bbb;
}

最佳答案

正如 Sparky672 所说,您的 HTML 无可救药地无效。你应该修复它。

但是,要解决您遇到的特定问题,您需要做的就是在第一行添加一个有效的文档类型:

<!DOCTYPE html>

如果没有这个,IE 将处于怪癖模式。

关于css - 如何修复 IE9 的悬停伪类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8899762/

相关文章:

CSS边框图像重复不起作用

css - 将tipsy放在每个div出现的地方

html - 当文本和表单 float 时,粘性页脚移出位置 - BootStrap

html - Chrome - 保持列宽最小

css - 如何进行 sass-only 评论

CSS 填充 100% 的高度。不同的浏览器大小

html - 改变 float 元素的高度和 splinter 的网格布局

css - Chrome 浏览器开发工具是否遵守指定 !important 的样式更改?

javascript - 当元素的显示属性在 Javascript 中发生更改时,如何使我的元素淡入淡出?

仅在 IE8 中出现 css 媒体查询问题