Miért nem működik ez a CSS menü Internet Exyplorer alatt? (tudom hogy azt nem ajánlott használni, de akkor is. )

index.html:

-----------

<link rel="stylesheet" type="text/css" href="ml-navigation-bar5.css">

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>

<!--STYLE 5-->

<ul class="ml-navigation-bar-5">

<li class="active">

</li>

<li><a href="#"><span>111</span></a>

<ul>

<li><a href="#">111a</a></li>

<li><a href="#">111b</a></li>

<li><a href="#">111c</a></li>

<li><a href="#">111d</a></li>

</ul>

</li>

<li><a href="#">222</a></li>

<li><a href="#">333</a></li>

<li><a href="#">444</a></li>

<li><a href="#">555</a></li>

</ul>

</body>

</html>

ml-navigation-bar5.css:

-----------------------

/* General & Layout */

body {

font-size: 14px;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

background: #d0dde7;

}

ul {

padding: 0;

margin: 0;

}

h1 {

width: 960px;

margin: 40px auto 20px;

color: #666;

}

/*Navigation Bar*/

ul.ml-navigation-bar-5{

margin: 40px auto;

width: 960px;

display: block;

height: 50px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

background-color: rgba(241,241,241,.25);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.65), inset 0 1px 1px rgba(255,255,255,.5);

-moz-box-shadow: 0 1px 3px rgba(0,0,0,.65), inset 0 1px 1px rgba(255,255,255,.5);

box-shadow: 0 1px 3px rgba(0,0,0,.65), inset 0 1px 1px rgba(255,255,255,.5);

}

/*Dropdowns*/

ul.ml-navigation-bar-5 ul{display:none;}

ul.ml-navigation-bar-5 li:hover>ul{display:block}

ul.ml-navigation-bar-5 ul{position: absolute;left:0px;top:80%;}

ul.ml-navigation-bar-5 ul ul{position: absolute;left:95%;top:-20px;}

ul.ml-navigation-bar-5 ul {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

background-color: rgba(241,241,241,.25);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.65), inset 0 1px 1px rgba(255,255,255,.5);

-moz-box-shadow: 0 1px 3px rgba(0,0,0,.65), inset 0 1px 1px rgba(255,255,255,.5);

box-shadow: 0 1px 3px rgba(0,0,0,.65), inset 0 1px 1px rgba(255,255,255,.5);

z-index: 5000;

}

/*List Items*/

ul.ml-navigation-bar-5 li{

display:block;

margin: 0px;

float:left;

border-right: 1px solid rgba(0,0,0,.1);

-webkit-box-shadow: 1px 0px 0px rgba(255,255,255,.75);

-moz-box-shadow: 1px 0px 0px rgba(255,255,255,.75);

box-shadow: 1px 0px 0px rgba(255,255,255,.75);

}

ul.ml-navigation-bar-5 li.active {

border: none;

}

ul.ml-navigation-bar-5 ul li {

float:none;

margin: 5px 0;

border-right: none;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

}

/* Regular Links*/

ul.ml-navigation-bar-5 a:active, ul.ml-navigation-bar-5 a:focus {

outline-style:none;

}

ul.ml-navigation-bar-5 a {

height: 50px;

display:block;

line-height: 52px;

background: none;

text-shadow: 0 1px 0 rgba(255,255,255,.50);

padding: 0px 15px;

text-decoration: none;

color: rgba(0,0,0,.60);

margin: 0 0 0 5px;

font-weight: bold;

font-size: 14px;

text-transform: uppercase;

}

/*Multi-level Links*/

ul.ml-navigation-bar-5 ul a {

margin: 0px;

height: 40px;

line-height: 40px;

}

ul.ml-navigation-bar-5 span{

overflow:hidden;

}

ul.ml-navigation-bar-5 ul a {

text-align:left;

white-space:nowrap;

}

ul.ml-navigation-bar-5 li:hover{

position:relative;

}

/*Active State*/

ul.ml-navigation-bar-5 li.active a, ul.ml-navigation-bar-5 li.active:hover a {

padding: 0 22px;

background-color: rgba(241,241,241,.8);

-webkit-box-shadow: 0 0 8px rgba(255,255,255,.25), inset 0 0 1px rgba(255,255,255,1);

-moz-box-shadow: 0 0 8px rgba(255,255,255,.25), inset 0 0 1px rgba(255,255,255,1);

box-shadow: 0 0 8px rgba(255,255,255,.25), inset 0 0 1px rgba(255,255,255,1);

color: #fff;

text-shadow: 0 1px 1px rgba(0,0,0,.50);

}

/*Hover State*/

ul.ml-navigation-bar-5 li:hover>a{

color: #fff;

text-shadow: none;

text-decoration:none;

text-shadow: 0 1px 3px rgba(0,0,0,.50);

}

ul.ml-navigation-bar-5 li a:hover{

position:relative;

}

/*Arrow Images*/

ul.ml-navigation-bar-5 span{

display:block;

background-image:url(./arrow-1.png);

background-position:right center;

background-repeat: no-repeat;

padding-right:18px;}

ul.ml-navigation-bar-5 li:hover>a>span{

background-image:url(./arrow-1a.png);

}

ul.ml-navigation-bar-5 a:hover span{ background-image:url(./arrow-1a.png)}

ul.ml-navigation-bar-5 ul span,ul.ml-navigation-bar-5 a:hover table span{ background-image:url(./arrow-2.png)}

ul.ml-navigation-bar-5 ul li:hover > a span{ background-image:url(./arrow-2a.png);}

ul.ml-navigation-bar-5 table a:hover span,ul.ml-navigation-bar-5 table a:hover a:hover span,ul.ml-navigation-bar-5 table a:hover a:hover a:hover span{background-image:url(./arrow-1.png)}

ul.ml-navigation-bar-5 table a:hover table span,ul.ml-navigation-bar-5 table a:hover a:hover table span{background-image:url(./arrow-1.png)}

/*Search Field*/

ul.ml-navigation-bar-5 .search-field {

float: right;

width: 250px;

padding: 2px;

margin: 8px;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

background-color: rgba(0,0,0,.1);

-webkit-box-shadow: 0 1px 1px rgba(255,255,255,.75), inset 0 1px 2px rgba(0,0,0,.5);

-moz-box-shadow: 0 1px 1px rgba(255,255,255,.75), inset 0 1px 2px rgba(0,0,0,.5);

box-shadow: 0 1px 1px rgba(255,255,255,.75), inset 0 1px 2px rgba(0,0,0,.5);

}

ul.ml-navigation-bar-5 .search-field input[type=text] {

background: none;

border: none;

text-decoration: none;

color: #fff;

font-weight: normal;

font-size: 14px;

width: 184px;

padding: 6px 5px 5px 12px;

text-shadow: 0 1px 1px rgba(0,0,0,.50);

}

ul.ml-navigation-bar-5 .search-field input[type=text]:focus {

outline: none;

}

ul.ml-navigation-bar-5 .search-button {

float: right;

margin: 2px 2px 0 0;

}