html - メニューが Internet Explorer 8 および 9 で正しく機能しない

Question

ie9 と ie8 のメニューに問題があります。ie7 では問題なく動作しますが、ie9 と ie8 では動作しません。

サイトにアクセスするには: http://geotopsa.futuraserveis.com/en/home.html

これはhtmlコードです：

<div id="menuContenidor">
            <ul id="menu">
            <li class="inici"><a href="<?php echo url_for($ruta_inici) ?>"><?php echo __(
        'Inici') ?></a></li>
            <li class="normal"><a href="<?php echo url_for($ruta_empresa) ?>"><?php echo __(
        'Empresa') ?></a></li>
            <li class="ample"><a href="#"><?php echo __('Serveis') ?></a>
                  <ul id="ambits">
                    <li><img class="corner_inset_left" alt="" src="/images/Menu/corner_inset_left.png"/>
                        <a href="<?php echo url_for($ruta_serveis_soterrats) ?>"><?php echo __(
        'Aixecament de serveis urbans') ?></a>
                        <img class="corner_inset_right" alt="" src="/images/Menu/corner_inset_right.png"/>
                                <li><a href="<?php echo url_for(
        $ruta_infraestructures) ?>"><?php echo __("Infraestructures vials") ?></a></li>                    </li>

                    <li><a href="<?php echo url_for($ruta_topografia) ?>"><?php echo __(
        'Topografia') ?></a></li>
                    <li><a href="<?php echo url_for($ruta_proteccio) ?>"><?php echo __(
        'Protecció del patrimoni') ?></a></li>
             <li><a href="<?php echo url_for($ruta_aplicacions_especials) ?>"><?php echo __(
        'Aplicacions especials') ?></a></li>

                    <li class="last">
                      <img class="corner_left" alt="" src="/images/Menu/corner_left.png"/>
                      <img class="middle" alt="" src="/images/Menu/dot.gif"/>
                      <img class="corner_right" alt="" src="/images/Menu/corner_right.png"/>                    </li>
                  </ul>
            </li>

                        <li class="ample"><a href="#"><?php echo __(
        'Mètodes de prospecció') ?></a>
                  <ul id="ambits">
                    <li><img class="corner_inset_left" alt="" src="/images/Menu/corner_inset_left.png"/>
                        <a href="<?php echo url_for($ruta_georadar) ?>"><?php echo __(
        'Georadar') ?></a>
                        <img class="corner_inset_right" alt="" src="/images/Menu/corner_inset_right.png"/>                    </li>
                    <li><a href="<?php echo url_for($ruta_tomografia) ?>"><?php echo __(
        'Tomografia elèctrica') ?></a></li>



                    <li class="last">
                      <img class="corner_left" alt="" src="/images/Menu/corner_left.png"/>
                      <img class="middle" alt="" src="/images/Menu/dot.gif"/>
                      <img class="corner_right" alt="" src="/images/Menu/corner_right.png"/>                    </li>
                  </ul>
            </li>
            <li class="normal"><a href="<?php echo url_for($ruta_projectes) ?>"><?php echo __(
        'Projectes') ?></a></li>
            <li class="normal"><a href="<?php echo url_for($ruta_clients) ?>"><?php echo __(
        'Clients') ?></a></li>
            <li class="normal"><a href="<?php echo url_for($ruta_contactar) ?>"><?php echo __(
        'Contactar') ?></a></li>                
            <li class="menuUltim"><a href="ftp://79.148.111.133" target="_blank"><?php echo __(
        'Ftp') ?></a></li>
        </ul>
    </div>

そしてCSS：

#menu {
    font-size: 0.9em;
    margin: 0px;
    margin-left: 18px;
    padding: 0px;
    list-style: none;
    color: #fff;
    line-height: 30px;
    display: inline-block;
    float: left;
    z-index: 1000;
}

#menu a {
    color: #fff;
    text-decoration: none;
}

#menu>li {
    background: #202726 none repeat scroll 0 0;
    cursor: pointer;
    float: left;
    position: relative;
    padding: 0px 10px;
    width: 91px;
    border-top-color: #FFFFFF;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    border-left-color: #FFFFFF;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    text-align: center;
    border-right-style: solid;
}

#menu>li.inici {
    width: 55px;
}

#menu>li.normal {
    width: 106æpx;
}

#menu>li.ample {
    width: 169px;
}

#menu>li.menuUltim {
    background: #202726 none repeat scroll 0 0;
    cursor: pointer;
    float: left;
    position: relative;
    padding: 0px 10px;
    width: 38px;
    border-top-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    border-left-color: #FFFFFF;
    border-top-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-right: none !important;
    text-align: center;
}

#menu>li a:hover {
    color: #948B52;
}

#menu .logo {
    background: transparent none repeat scroll 0% 0%;
    padding: 0px;
    background-color: Transparent;
}

/* sub-menus*/
#menu ul {
    padding: 0px;
    margin: 0px;
    display: block;
    display: inline;
}

#menu li ul {
    position: absolute;
    left: 0px;
    top: 0px;
    margin-top: 30px;
    width: 188px;
    line-height: 16px;
    background-color: #202726;
    color: #0395CC; /* for IE */
    display: none;
}

#menu li ul.ample {
    position: absolute;
    left: 0px;
    top: 0px;
    margin-top: 30px;
    width: 179px;
    line-height: 16px;
    background-color: #202726;
    color: #0395CC; /* for IE */
    display: none;
}

#menu li:hover ul {
    display: block;
}

#menu li ul li {
    display: block;
    margin: 5px 20px;
    padding: 5px 0px;
    border-top: dotted 1px #606060;
    list-style-type: none;
}

#menu li ul li:first-child {
    border-top: none;
}

#menu li ul li a {
    display: block;
    color: #727465;
}

#menu li ul li a:hover {
    color: #DFD7CB;
}
/* main submenu */
#menu #main {
    left: 0px;
    top: -20px;
    padding-top: 20px;
    background-color: #7cb7e3;
    color: #fff;
    z-index: 999;
}
/* corners*/
#menu .corner_inset_left {
    position: absolute;
    top: 0px;
    left: -12px;
}

#menu .corner_inset_right {
    position: absolute;
    top: 0px;
    left: 188px;
}

#menu .last {
    background: transparent none repeat scroll 0% 0%;
    margin: 0px;
    padding: 0px;
    border: none;
    position: relative;
    border: none;
    height: 0px;
}

#menu .corner_left {
    position: absolute;
    left: 0px;
    top: 0px;
}

#menu .corner_right {
    position: absolute;
    left: 170px;
    top: 0px;
}

#menu .middle {
    position: absolute;
    left: 18px;
    height: 20px;
    width: 152px;
    top: 0px;
}

私に何ができる？問題はどこだ？