vertical dropDown菜单在Internet Explorer和Firefox中不起作用

Question

当我在谷歌浏览器中进行测试时，它的功能非常完美。 当我使用InternetExplore时，我无法点击第二个嵌套的li并且在Firefox中我不能悬停嵌套的li。

这是HTML菜单代码示例：

<div id="menu">
  <ul>
    <li class="highliteShadow"> <a href="index.php?page=home" title="Home pagina">Home</a>
      <div class="clear"></div>
    </li>
    <li class="highliteShadow"> <a href="#" title="Week 1">Week 1 <i class="icon-arrow-right icon-white"></i></a>
      <ul>
        <li> <a href="index.php?page=week_a" title="Opdrachten week 1">Opdracht 1</a> </li>
        <li> <a href="/beheer/opdrachten/opdracht_a/index.html" title="Werkend voorbeeld opdracht 1" target="_blank">Werkend voorbeeld</a> </li>
      </ul>
      <div class="clear"></div>
    </li>
  </ul>
</div>

这是CSS菜单代码示例：

#container #menu ul {
    margin: 40px 0 40px 0;
    padding: 0px;
    width: 227px;
    list-style-type: none;
}
#container #menu ul li {
    margin: 0 0 5px 6px;
    height: 40px;
    list-style: none;
    background-image: url("../img/bg_header.png");
}
#container #menu ul li .picture {
    float: left;
    height: 40px;
    width: 40px;
    background-color: #787776;
}
#container #menu ul li:hover {
    opacity: 0.8;
    filter: alpha(opacity=60); /* Debug IE 8 and earlier */
    background-color: #000;
}
#container #menu ul li a {
    float: left;
    padding: 10px;
    width: 201px;
    color: #fff;
}
#container #menu ul li a:hover {
    text-decoration: none;
}
#container #menu ul ul {
    position: absolute;
    visibility: hidden;
    padding: 0px;
    margin: 0 0 0 221px;
}
#container #menu ul li:hover ul {
    visibility: visible;
}
#container #menu ul li ul li {
    -moz-box-shadow: 0 0 5px 0 #888;
    -webkit-box-shadow: 0 0 5px 0 #888;
    box-shadow: 0 0 5px 0 #888;
}
#container #menu ul li ul li:hover {
    opacity: 0.8;
    filter: alpha(opacity=60); /* Debug IE 8 and earlier */
    background-color: #000;
}
#container #menu ul li:hover ul li a {
    float: left;
    padding: 10px;
    color: #fff;
}