如何修复IE9的悬停伪类

我知道这是一个典型的问题，但我找不到解决方案。除了IE9，我的CSS下拉菜单在任何地方都能正常工作。下拉菜单在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作为第一行：

<!DOCTYPE html>

如果没有这一点，IE就处于怪癖模式。

没有看到演示，我不知道这是否能解决问题，但CSS中有语法错误。缺少打开的(。

这种方式总是适用于我…

background-image: url(http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png);

根据评论和演示URL编辑：

您有一些严重的HTML验证错误（编辑#2：最初，列出的第一个错误是缺少doctype，这将使IE进入怪癖模式。）

你的页面顶部有这个。。。

<html>
<head>
    <title>Debrief and Measure</title>
</head>
<body>
<html>
<head>
    <title>Discover Simulation</title>
</head>
    <link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'> 
    <link href="/Laerdal/_LOCAL_CONTENT/usa/css/discoversimulation.css" rel="stylesheet" type="text/css">
<body>

注意所有重复的<html>、<body>和<head></head>标记。

然后在你的页面底部。。。

</body>
</html>
<div align="center">
    <div id="whitebox">
        ...snipped...
    </div>
</body>
</html>

请注意无关的</body></html>标记。

顺便说一句：align="center"已被弃用。

相关内容

最新更新

热门标签：