讓你的Bootstrap下拉選單可以支援多層選單

Bootstrap 3.x 的下拉選單只支援到第二層、如果您需要多層選單的話、可以試試加上底下這支 bootstrap-submenu.js

Step 1: 載入必要的CSS和JS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="dist/css/bootstrap-submenu.min.css">

<script src="https://code.jquery.com/jquery-3.1.1.min.js" defer></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" defer></script>
<script src="dist/js/bootstrap-submenu.min.js" defer></script>

Step 2: HTML

<ul class="nav navbar-nav">
  <li><a href="#">連結</a></li>
  <li><a href="#">連結</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"  data-submenu>下拉選單 <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">第二層連結</a></li>
      <li class="dropdown-submenu">
        <a href="#">第二層連結有子選單</a>
        <ul class="dropdown-menu">
          <li><a href="#">第三層連結</a></li>
          <li><a href="#">第三層連結</a></li>
          <li class="dropdown-submenu">
            <a href="#">第三層連結有子選單</a>
            <ul class="dropdown-menu">
              <li><a href="#">第四層連結</a></li>
              <li class="dropdown-submenu">
                <a href="#">第四層連結有子選單</a>
                <ul class="dropdown-menu">
                  <li><a href="#">第五層連結</a></li>
                  <li><a href="#">第五層連結</a></li>
                  <li><a href="#">第五層連結</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">第五層連結</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">第五層連結</a></li>
                </ul>
              </li>
              <li><a href="#">第四層連結</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">第四層連結</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">第四層連結</a></li>
            </ul>
          </li>
          <li role="separator" class="divider"></li>
          <li><a href="#">第三層連結</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">第三層連結</a></li>
        </ul>
      </li>
      <li><a href="#">第二層連結</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">第二層連結</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">第二層連結</a></li>
    </ul>
  </li>
</ul>

在第一層下拉選單的<a>標籤加上data-submenu，有子選單的<li>標籤加上  class="dropdown-submenu"。

Step 3: 啟用bootstrap-submenu

<script type="text/javascript">
  $(function() {
    $('[data-submenu]').submenupicker();
  });
</script>

現在您的Bootstrap下拉選單已經可以支援多層選單了。如果您需要更多範例可以參考bootstrap-submenu。