在Bootstrap Nav Menu

Question

新手，试图学习自助训练，我已经在墙上撞到了我的头。我有一个导航菜单...有一个下拉菜单，可以悬停。现在我要做的是创建一个另外的子菜单（Level 3），它也适用于悬停。就像第三级嵌套菜单一样。将鼠标悬停在“菜单1”上，出现“菜单2”，将鼠标悬停在菜单2上，出现“菜单3”...全部完全嵌套。我似乎无法让它发挥作用。如果有人能让我朝着正确的方向前进，我将永远感激不尽。

.navbar-brand {
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 2px;
}

.navbar-nav {
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 3px;
}

.dropdown-menu {
  margin-top: -1px;
  min-width: 250px;
}

.navbar-nav .dropdown-menu {
  background-color: #ff4444;
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  border: 0;
  padding: 0;
  margin-top: 0;
  border-top: 0;
  border-radius: 0;
  left: 0;
}

.navbar-nav .dropdown-menu:before {
  position: absolute;
  top: 0;
}

.navbar-nav .dropdown-menu>li>a {
  padding: 8px 15px;
  color: #fff;
}

.navbar-nav .dropdown-menu>li:hover>a,
.navbar-nav .dropdown-menu>li:focus>a,
.navbar-nav .dropdown-menu>li.active>a {
  background-color: #7f2222;
  color: #fff;
}

.navbar-nav .dropdown-menu>li:last-child>a {
  border-radius: 0 0 3px 3px;
}

.dropdown-menu>li.divider {
  background-color: transparent;
}


/* Show the dropdown menu on hover */

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
      <!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
      <a class="navbar-brand" href="index">XYZ Company</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"><b>Level 1</b>
                                <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="level2">Level 2</a></li>
            <li><a href="level2">Level 2</a></li>
            <li><a href="level2">Level 2</a></li>
            <li><a href="level2">Level 2</a></li>
            <li><a href="level2">Level 2</a></li>
            <li><a href="level2">Level 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>