Cool CSS Menu

I was wondering if there is some javascript code that could be added to make the animation work in IE

HTML

<ul id="menu">
    <li><a>Home</a><span></span></li>
    <li><a>The List</a><span></span></li>
    <li><a>Common</a><span></span></li>
    <li><a>Quotes</a><span></span></li>
    <li><a>Poems</a><span></span></li>
    <li><a>Photos</a><span></span></li>
</ul>

CSS

#menu{
    list-style: none;
    position: relative;
    top: 30px;
    text-align:center;
    margin: 0 0 40px 20px;
    font-family: Helvetica, Arial, sans-serif;
    z-index:50;
}
#menu li {
    position: relative;
    display:inline-block;
    height: 40px;
    width:100px;
}
@media(min-width:280px){#menu li{margin-right:20px;}}}}
@media(max-width:279px){#menu li{margin-right:0;}}
#menu li a {
    color: #000;
    text-decoration: none;
    display: block;
    position: relative;
    height: 40px;
    padding:10px 15px 0;
    font-weight: bold;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
}
#menu li span {
    width: 6px;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
}
#menu li:nth-of-type(1) span { background: green; }
#menu li:nth-of-type(2) span { background: red; }
#menu li:nth-of-type(3) span { background: #ff8400; }
#menu li:nth-of-type(4) span { background: purple; }
#menu li:nth-of-type(5) span { background: #49a7f3; }
#menu li:nth-of-type(6) span { background: yellow; }
#menu li:hover > span {
  width: 100%;
}
#menu li a:hover {color: #fff; cursor:pointer;}
#menu li:hover {box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);}