Menu Hover is not working in IE - html

Question

I downloaded this MENU from dynamicdrive.com but there is someone wrong in it.
It works fine in FireFox , Safari and Chrome. But not working in IE.
In IE 9 or lower, it appears vertical menu not horizontal and hover is not working also.
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><span>Home</span></li>
<li><span>About us</span></li>
<li><span>Products</span></li>
<li><span>Contact us</span></li>
</ul>
</div>

Answer 1

If you are testing in IE-9 or lower the transitions will not work. It is currently working in IE-10. Hope this helps.

Answer 2

Your CSS is using the transition timing function. This is not supported in IE 9 or below. The bar is horizontal in all the browsers I tested. If you're using something < IE 9, you should look to get a new computer