悬停Pseudo类后的CSS后代选择器仅适用于Chrome

Question

我正在创建一个菜单，我希望菜单项在我悬停在它们上时淡入，当我将它们悬停时淡出。我正在使用CSS 3.此代码适用于Chrome，而不适用于其他浏览器。它似乎是CSS中的一行，在导致问题的悬停psuedo类之后有一个直接的后代选择器。

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;
}