4.2.2　多级嵌套

在很多情况下，我们可能需要多级菜单（也就是经常提到的嵌套菜单）。原来的2.x版里有这种功能，但在新版里已经被删除了，也许作者认为这个功能使用的频率不是特别多吧。老版是利用在.dropdown-meun样式中嵌套来实现类似的功能，做法是：只需要在子菜单项上应用.dropdown-submenu样式，然后在li元素里，和标准的菜单设置一样，内部嵌套一个新的ul元素即可（在这个ul上也需要设置标准的.dropdown-menu样式）。示例如下：

  1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  2.    <!-- 其他多个菜单项li元素 -->
  3.    <li class="dropdown-submenu pull-left">
  4.       <a tabindex="-1" href="#">More options</a>
  5.       <ul class="dropdown-menu">
  6.          <li><a tabindex="-1" href="#">二级菜单项</a></li>
  7.          <li><a tabindex="-1" href="#">二级菜单项</a></li>
  8.          <li><a tabindex="-1" href="#">二级菜单项</a></li>
  9.          <li><a tabindex="-1" href="#">二级菜单项</a></li>
  10.          <li><a tabindex="-1" href="#">二级菜单项</a></li>
  11.       </ul>
  12.    </li>
  13.    <!-- 其他多个菜单项li元素 -->
  14. </ul>

上述代码的运行效果如图4-10所示。

4.2.2　多级嵌套 - 图1 图4-10　嵌套菜单运行效果

同理，根据上图的效果可以看出，如果要设置子菜单向上弹出，需要将dropdown样式换成dropup样式，居右的话则需要在菜单项上加pull-right样式。如果要在新版里使用上述功能，可以将V2.x版的如下代码，添加到自定义文件（或扩展文件）中即可。

  1. .dropdown-submenu {
  2.    position: relative;          /* 相对定位 */
  3. }
  4. .dropdown-submenu > .dropdown-menu {
  5.       top: 0;
  6.       left: 100%;                       /* 右侧开始对齐 */
  7.       margin-top: -6px;        margin-left: -1px;
  8.       -webkit-border-radius: 0 6px 6px 6px;
  9.       -moz-border-radius: 0 6px 6px 6px;
  10.       border-radius: 0 6px 6px 6px;
  11.    }
  12. .dropdown-submenu:hover > .dropdown-menu { display: block;    }
  13. .dropup .dropdown-submenu > .dropdown-menu {
  14. top: auto;    bottom: 0;                /* 向上方向 */
  15.    margin-top: 0;    margin-bottom: -2px;
  16.    -webkit-border-radius: 5px 5px 5px 0;
  17.    -moz-border-radius: 5px 5px 5px 0;
  18.    border-radius: 5px 5px 5px 0;
  19. }
  20. .dropdown-submenu > a:after {
  21.    display: block;
  22.    float: right;
  23.    width: 0;    height: 0;
  24.    margin-top: 5px;    margin-right: -10px;
  25.    border-color: transparent;
  26.    border-left-color: #cccccc;  /* 三角符号设置*/
  27.    border-style: solid;
  28.    border-width: 5px 0 5px 5px;
  29.    content: " ";
  30. }
  31. .dropdown-submenu:hover > a:after {
  32.     border-left-color: #cccccc;                 /* 鼠标移动时的三角符号设置*/ }
  33. .dropdown-submenu.pull-left {    float: none;   /* 取消子菜单的向右浮动 */ }
  34. .dropdown-submenu.pull-left > .dropdown-menu {
  35.       left: -100%;              /* 向右浮动的时候，子菜单应该从最左侧开始对齐计算 */
  36.       margin-left: 10px;
  37.       -webkit-border-radius: 6px 0 6px 6px;
  38.       -moz-border-radius: 6px 0 6px 6px;
  39.       border-radius: 6px 0 6px 6px;
  40. }