css - 悬停伪类后的 CSS 后代选择器仅适用于 Chrome

Question

我正在创建一个菜单，我希望菜单项在我将鼠标悬停在它们上时淡入，并在我悬停在它们之外时淡出。我正在使用 CSS 3。此代码在 Chrome 中有效，在其他浏览器中无效。似乎是 CSS 中的行，在导致问题的悬停伪类之后有一个直接后代选择器。

HTML

<div class="mainMenu">
  <ul id="nav">
    <li class="dir">
     Menu Item
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </li>
  </ul>
</div>

CSS

li.dir > ul{
  opacity: 0;
  transition: opacity .3s ease-in-out;
  -moz-transition: opacity .3s ease-in-out;
  -webkit-transition: opacity .3s ease-in-out;
}

li.dir:hover > ul {
  opacity: 1.0;
}