First look at [[https://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#]]\\

The basic bootstrap inbuilt dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list

<code>
<div class="dropdown">
 <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
 <span class="caret"></span></button>
 <ul class="dropdown-menu">
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
 </ul>
</div>
</code>

The '' .dropdown'' class indicates a dropdown menu.

To open the dropdown menu, use a button or a link with a class of '' .dropdown-toggle'' and the '' data-toggle="dropdown"'' attribute.

The '' .caret'' class creates a caret arrow icon (v), which indicates that the button is a dropdown.

Add the '' .dropdown-menu'' class to a '' <ul>'' element to actually build the dropdown menu.

**Dropdown Divider**\\
The .divider class is used to separate links inside the dropdown menu with a thin horizontal border:
<code>
<li class="divider"></li>
</code>

**Dropdown Header**\\ 
The '' .dropdown-header'' class is used to add headers inside the dropdown menu:
<code>
<li class="dropdown-header">Dropdown header</li>
</code>

**Disable and Active items**\\ 
Highlight a specific dropdown item with the '' .active'' class (adds a blue background color).

To disable an item in the dropdown menu, use the '' .disabled'' class (gets a light-grey text color and a "no-parking-sign" icon on hover):
<code>
<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>
</code>

**Dropdown Position**\\
To right-align the dropdown, add the '' .dropdown-menu-right'' class to the element with '' .dropdown-menu'':
<code>
<ul class="dropdown-menu dropdown-menu-right">
</code>

**Dropup**\\ 
If you want the dropdown menu to expand upwards instead of downwards, change the '' <div>'' element with '' class="dropdown"'' to '' "dropup"'':
<code>
<div class="dropup">
</code>

**Dropdown Accessibility**\\
To help improve accessibility for people using screen readers, you should include the following '' role'' and '' aria-*'' attributes, when creating a dropdown menu
<code>
<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
 <span class="caret"></span></button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
  <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
  <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
  <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
 </ul>
</div>
</code>
==========
To do a multilevel dropdown requires some additional CSS
<code>
.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;
}
</code>

Then within a '' <li>'' element in the dropdown add
<code>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
<ul class="dropdown-menu multi-level">
 <li class="dropdown-submenu">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
  <ul class="dropdown-menu">
  <li><a href="#">Action</a></li>
  <li class="dropdown-submenu">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
   <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
   </ul>
  </li>
 </li>
</ul> 
</code>
Use '' multi-level'' if the first '' <ul>'' is going to have more levels in it's dropdown

