Twitter bootstrap twitter引导子下拉列表不工作

我试图按照（底部窗格；下拉菜单->操作）中的示例创建子下拉菜单，但无法这样做。这是我的密码：

<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>

项目#5

演示：

如果您可以单击“项目4”，则会显示一个带有“项目5”的子下拉列表

有什么想法吗？

bootstrap中不存在.dropdown子菜单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;
}