javascript - 菜单悬停的 IE 问题

Question

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

使用 IE(9 或更低版本)，将鼠标悬停在主页上的任何菜单上并尝试选择元素 2+，即:将鼠标悬停在商店上并尝试单击刷子或护发，菜单消失。

我怀疑这是由于我的幻灯片内容造成的，但是我尝试过的所有方法(CSS hack 和 JS 更改)都没有让菜单正常工作，而且在 FF、Chrome 和 Safari 上也是如此。

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

编辑:我已经更新了 Justus 的 CSS fiddle，以包含没有无关代码位的幻灯片内容 - http://jsfiddle.net/eN7sh/14/ .随意使用它，只是寻找 IE 上的问题..主要是 IE9。

Answer 1

您的网站有很多其他代码，因此很难找出真正导致问题的原因。我刚才摆弄了一个 css-only 3 级菜单:http://jsfiddle.net/eN7sh/12/

我敢肯定，如果您可以匹配 css/html，它就会工作，尽管 li:hover 可能无法在 IE7 上工作.如果必须的话，您可以只使用 javascript 在 hover 事件上添加一个类名并使用它。 fiddle 代码: 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;
​}​