...
</ul>
</pre>
-
- <h3>Sub menus on dropdowns</h3>
- <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
- <div class="bs-docs-example bs-docs-example-submenus">
-
- <div class="pull-left">
- <p class="muted">Default</p>
- <div class="dropdown clearfix">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
-
- <div class="pull-left">
- <p class="muted">Dropup</p>
- <div class="dropup">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
-
- <div class="pull-left">
- <p class="muted">Left submenu</p>
- <div class="dropdown">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu pull-left">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
-
- </div>
-<pre class="prettyprint linenums">
-<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
- ...
- <li class="dropdown-submenu">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- ...
- </ul>
- </li>
-</ul>
-</pre>
-
</section>
...
</ul>
</pre>
-
- <h3>Sub menus on dropdowns</h3>
- <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
- <div class="bs-docs-example bs-docs-example-submenus">
-
- <div class="pull-left">
- <p class="muted">Default</p>
- <div class="dropdown clearfix">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>{{! /.pull-left }}
-
- <div class="pull-left">
- <p class="muted">Dropup</p>
- <div class="dropup">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>{{! /.pull-left }}
-
- <div class="pull-left">
- <p class="muted">Left submenu</p>
- <div class="dropdown">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu pull-left">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>{{! /.pull-left }}
-
- </div>{{! /example }}
-<pre class="prettyprint linenums">
-<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
- ...
- <li class="dropdown-submenu">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- ...
- </ul>
- </li>
-</ul>
-</pre>
-
</section>