菜单悬停的IE问题

Question

网站： http ： //bit.ly/Pa3xJS

使用IE（9或更低版本），将鼠标悬停在主页上的任何菜单上并尝试选择2+项，即：将鼠标悬停在Shop上并尝试单击“画笔”或“ Haircare”，菜单就会消失。

我怀疑这是由于我的幻灯片内容所致，但是我尝试过的所有操作（CSS hack和JS更改）都无法使菜单正常运行，并且无法在FF，Chrome和Safari上运行。

是否有针对此的特定IE修复程序或我错过的CSS hack？

编辑：我更新了Justus的CSS小提琴，使其包含了slidecontent，而没有无关的代码-http: //jsfiddle.net/eN7sh/14/ 。 随便玩，只寻找IE ..主要是IE9上的问题。

Answer 1

您的网站上还有许多其他代码，因此很难看出是什么导致了问题。 我刚才摆弄了一个css的3级菜单： http : //jsfiddle.net/eN7sh/12/

我很确定，如果可以匹配css / html ，它将起作用，尽管li:hover在IE7上可能不起作用。 您可以仅使用javascript在hover事件上添加类名，并在需要时使用hover 。 小提琴代码：HTML：

<ul class="main">
  <li ><a href="#">Link one</a></li>
  <li><a href="#">Link two</a>
    <ul>
      <li><a href="#">Sublink one</a></li>
      <li><a href="#">sublink two</a>
        <ul>
          <li><a href="#">Sub sublink one</a></li>
          <li><a href="#">Sub sublink two</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS：

ul.main {
}
.main li {
    float: left;
    position: relative;
}
.main ul {
    position: absolute;
    display: none;
    left: 0;
    top: 1em;
}
.main li:hover > ul {
    display: block;
}
.main ul li {
    display: block;
    float: none;
    white-space:nowrap;
}
.main ul ul {
    left:100%;
    top: 0;
​}​

Answer 2

我检查了您的网站，即8.it工作正常..

你应该做的一件事

应用

子菜单项上的z-index属性。