twitter bootstrap subdropdowns не работает

Question

Я пытаюсь следовать примеру на http://www.bootply.com/123179 (нижняя панель, раскрывающееся меню -> Действие), чтобы создать вспомогательные выпадающие списки, но я не могу этого сделать. Вот мой код:

<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

Я хотел бы, если вы можете нажать на "Item # 4" и падение к югу вниз с "Пункт № 5" покажет вверх.

Любые идеи?

Answer 1

. Подпрограмма .dropdown-cmen (и связанная) не существует в bootstrap. Это было добавлено вручную в приведенной ссылке примера (верхний правый угловой блок):

.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; 
}