1

我将这些 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 级时,IE9 上不会出现 2 级或更多级。可能是什么问题?

4

0 回答 0