2014-09-03 51 views
0

我試圖按照http://www.bootply.com/123179(底部窗格;下拉 - >動作)的示例創建子下拉菜單,但無法這樣做。這裏是我的代碼:twitter bootstrap subdropdowns不工作

<nav class="navbar-default" role="navigation"> 
    <div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Item # 1</a> 
     <ul class="dropdown-menu nav multi-level" id="problem"> 
      <li><a href="#">Item # 2</a></li> 
      <li><a href="#">Item # 3</a></li> 
      <li class="dropdown-submenu"> 
      <a href="#">Item # 4</a> 
      <ul class="nav dropdown-menu"> 
       <li>Item # 5</li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</nav> 

演示:

http://www.frostjedi.com/terra/scripts/demo/bootstrap-menus.html

我想,如果你可以點擊「第4項」和子下拉以「項目#5」將顯示向上。

任何想法?

回答

1

引導程序中不存在.dropdown-submenu css(和相關)。這是在您提供的示例鏈接(右上角框)中手動添加的:

.dropdown-submenu { 
    position: relative; 
} 

.dropdown-submenu>.dropdown-menu { 
    top: 0; 
    left: 100%; 
    margin-top: -6px; 
    margin-left: -1px; 
    -webkit-border-radius: 0 6px 6px 6px; 
    -moz-border-radius: 0 6px 6px; 
    border-radius: 0 6px 6px 6px; 
} 

.dropdown-submenu:hover>.dropdown-menu { 
    display: block; 
} 

.dropdown-submenu>a:after { 
    display: block; 
    content: " "; 
    float: right; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #ccc; 
    margin-top: 5px; 
    margin-right: -10px; 
} 

.dropdown-submenu:hover>a:after { 
    border-left-color: #fff; 
} 

.dropdown-submenu.pull-left { 
    float: none; 
} 

.dropdown-submenu.pull-left>.dropdown-menu { 
    left: -100%; 
    margin-left: 10px; 
    -webkit-border-radius: 6px 0 6px 6px; 
    -moz-border-radius: 6px 0 6px 6px; 
    border-radius: 6px 0 6px 6px; 
}