css - ブートストラップ マルチレベル ドロップダウン メニュー

Question

以下のように、複数レベルのドロップダウン メニューにこれらの css ルールを使用しています。

/*Multilevel Dropdown*/
/**
* Bootstrap 2.0 dropdown multi-level menu enabler
* Bootstrap: http://twitter.github.com/bootstrap/javascript.html#dropdowns
*/
/* overrides */
.nav li.dropdown ul.dropdown-menu li ul {
display:block; 
position:absolute; 
left:100%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px 3px 3px 3px;
}

.nav li.dropdown ul.dropdown-menu ul {
display: none;
float:right;
position: relative;
top: auto;
margin-top: -30px;
}

および HTML は次のようになります。

<li class="dropdown">
  <a class="url dropdown-toggle" data-toggle="dropdown">My Dropdown<i class="icon-chevron-down"></i></a>
  <ul class="dropdown-menu">
      <li>
        <a href="#">Level1</a>
        <ul class="dropdown-menu">

            <li><a href="#">Level2</a></li>

            <li><a href="#">Level2</a></li>

            <li><a href="#">Level2</a></li>                                                              
        </ul>
      </li>

  </ul>
</li>

Chrome と Firefo では完全に機能しますが、第 1 レベルにカーソルを合わせると、第 2 レベル以上が IE9 に表示されません。何が問題になる可能性がありますか?