Menu Hover не работает в IE

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 или ниже. Полоса горизонтальная во всех браузерах, которые я тестировал. Если вы используете что-то < IE 9, вы должны посмотреть, чтобы получить новый компьютер