Question

我知道这是一个典型的问题，但我找不到解决方案。我的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;
}

Answer 1

没有看到演示，我不知道这是否会解决它，但你的CSS中有语法错误。缺少开头(。

这种方式对我来说总是有用......

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

根据评论和demo URL编辑：

你有一些严重的HTML validation errors。 （编辑＃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"已被弃用。

Answer 2

正如Sparky672所说，你的HTML无可救药地无效。你应该修理它。

但是，要解决您遇到的具体问题，您需要做的就是添加一个有效的doctype作为第一行：

<!DOCTYPE html>

没有这个，IE就处于怪癖模式。

如何修复IE9的hover伪类

2 个答案: