About Bootstrap's navigation bar

The following is the navigation bar of Bootstrap

<div id= "NavBar" class= "Navbar-collapse collapse" >
<ul class= "Nav navbar-nav" >
<li class= "Active" ><a href= "#" > Home </a></li>
<li><a href= "#" >About</a></li>
<li><a href= "#" >Contact</a></li>
<li class= "dropdown" ><a href= "#" class= "Dropdown-toggle"
Data-toggle= "dropdown" role= "button" aria-haspopup= "true"
Aria-expanded= "false" >dropdown<span class= "caret" ></span></a>
<ul class= "Dropdown-menu" >
<li><a href= "#" >Action</a></li>
<li><a href= "#" >another action</a></li>
<li><a href= "#" >something Else here</a></li>
<li role= "separator" class= "divider" ></li>
<li class= "Dropdown-header" >nav header</li>
<li><a href= "#" >separated link</a></li>
<li><a href= "#" >one more separated link</a></li>
</ul></li>
</ul>

The key is

<ul class= "nav navbar-nav navbar-right" >
<!--set its navigation bar--
<li><a href= "#" id= "username" class= "Dropdown-toggle"
Data-toggle= "dropdown" role= "button" aria-haspopup= "true"
Aria-expanded= "false" > "register" </a>
<ul class= "Dropdown-menu" >
<li><a href= "#" > Personal Information </a></li>
<li><a href= "#" > Change Password </a></li>
<li><a href= "#" > Set background </a></li>
</ul></li>

<li><a href= "/meetings/login" > "Exit" </a></li>
</ul>
UL inside has Li

This is something that needs special attention.

You can toggle the hidden content of the drop-down menu (Dropdown) Plugin:

with the Data property : Add data-toggle= "dropdown" to the link or button to toggle the drop-down menu as follows:

<div Class= "dropdown" > <a Span class= "ATN" >data-toggle= "dropdown"  = "#" > drop-down menu (Dropdown) trigger </a> <ul  Class= "Dropdown-menu"  role = "menu"  aria-labelledby = "Dlabel" > </ul 
 
 
 
               

About Bootstrap's navigation bar