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