我将这些 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 级或更多级。可能是什么问题?