Question

我从dynamicdrive.com下载了此菜单，但其中有人出错。

它在FireFox，Safari和Chrome中运行良好。但不能在IE中工作。

在IE 9或更低版本中，它显示垂直菜单不是水平的，悬停也不起作用。

CSS

<style>
.spotlightmenu{
width: 100%;
overflow:hidden;
}

.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center;
background: #e3e3e3;
}

.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px;
}

.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px;
height:50px;
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.spotlightmenu li:hover a{
color: white;
background: #a71b15;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

.spotlightmenu li a span{
position:relative;
top:35%;
}
</style>

HTML

<div class="spotlightmenu">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About us</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul>
</div>

Answer 1

如果您在IE-9或更低版本中进行测试，则转换将无效。它目前在IE-10中工作。希望这会有所帮助。

Answer 2

您的CSS正在使用转换计时功能。 IE 9或更低版本不支持此功能。在我测试的所有浏览器中，栏都是水平的。如果你正在使用某些东西＆lt; IE 9，你应该寻找一台新电脑

菜单悬停在IE中不起作用

2 个答案: