css - ホバー後のCSS子孫セレクターPsuedoクラスはChromeでのみ機能します

Question

メニュー項目にカーソルを合わせるとフェードインし、カーソルを合わせるとフェードアウトするメニューを作成しています。私はCSS3を使用しています。このコードはChromeで機能し、他のブラウザーでは機能しません。問題を引き起こしているのは、ホバーpsuedoクラスの後に直接の子孫セレクターがある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;
}