I have this piece of code
<li class="dropdown" runat="server" id="btn_logout">
<i class="fa fa-user">USER</i> <b class="caret"></b>
<ul class="dropdown-menu" style="background-color:black;">
<li class="dropdown-header">DROPDOWN HERE: </li>
<li>Manage Account</li>
<li role="separator" class="divider"></li>
<li>Sign Out</li>
</ul>
</li>
I would like to have another dropdown where it says drop down here.
How can I do this?
Short answer, submenus are not supported on bootstrap.
(TLDR) There are hacks as you may imagine:
.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;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<li class="dropdown" runat="server" id="btn_logout">
<i class="fa fa-user">USER</i> <b class="caret"></b>
<ul class="dropdown-menu" style="background-color:black;">
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">another level</a>
<ul class="dropdown-menu" style="background-color:black;">
<li>Manage Account</li>
<li role="separator" class="divider"></li>
<li>Sign Out</li>
</ul>
</li>
<li>Manage Account</li>
<li role="separator" class="divider"></li>
<li>Sign Out</li>
</ul>
</li>
source
Related
Currently I'm making multilevel dropdown using bootstrap 3. I expect the child menu is visible outside the parent dropdown menu. This is what I've done
HTML, CSS and JavaScript:
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">Test</li>
<li class="dropdown">
Test 1<b class="caret"></b>
<ul role="menu" class="dropdown-menu col-xs-2" style="height: auto; max-height: 1000px; overflow-x: hidden;">
<li></li>
<li>Anting</li>
<li>Cincin</li>
<li>Diamond Jewelry</li>
<li>Dinar</li>
<li class="dropdown-submenu">
Fine Gold<span class="caret"></span>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Toko abc</a></li>
<li><a tabindex="-1" href="#">Toko cde</a></li>
</ul>
</li>
<li>Gelang</li>
<li>Kalung</li>
<li>Liontin</li>
<li>Pin & Accessories</li>
</ul>
</li>
<li class="dropdown">Test 2</li>
</ul>
</nav>
and the result is look like this. the child menu is half hidden. I've been searching for the solution and none of them solve my problem. Thanks in advance
You use position: absolute; to your submenu and you can use toggleClass() to show and hide the menu. check below code.
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggleClass('show');
e.stopPropagation();
e.preventDefault();
});
});
.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{
position:relative;
}
.dropdown-menu.submenu{
display:none;
}
.dropdown-menu.submenu.show {
position: absolute;
top: 5px;
left: 50px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">Test</li>
<li class="dropdown">
Test 1<b class="caret"></b>
<ul role="menu" class="dropdown-menu col-xs-2" style="height: auto; max-height: 1000px; overflow-x: hidden;">
<li></li>
<li>Anting</li>
<li>Cincin</li>
<li>Diamond Jewelry</li>
<li>Dinar</li>
<li class="dropdown-submenu">
Fine Gold<span class="caret"></span>
<ul class="dropdown-menu submenu">
<li><a tabindex="-1" href="#">Toko abc</a></li>
<li><a tabindex="-1" href="#">Toko cde</a></li>
</ul>
</li>
<li>Gelang</li>
<li>Kalung</li>
<li>Liontin</li>
<li>Pin & Accessories</li>
</ul>
</li>
<li class="dropdown">Test 2</li>
</ul>
</nav>
I'm a beginner in front-end development, I would like modify the behavior of bootstrap dropdown. In particular I would like to activate the second level with click and rather than hover. Also the first level items should be checkable, now if I click on it the dropdown closes.
I'm using this code: https://bootsnipp.com/snippets/kM4Q
You have tagged this question with bootstrap-4 tag, but you have added a link with bootstrap 3 files only, so in my answer I choose to use those files. This is a solution for Bootstrap 3 not 4.
To make that change, you could use jQuery, working with toggleClass function transforming also this CSS rule:
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
in this:
.dropdown-submenu > .dropdown-menu.active {
display: block;
}
To reset to initial situation when you close the dropdown menu, I added this function using Dropdown's event:
$('#mydropdown').on('hidden.bs.dropdown', function () {
$('ul', $(this)).removeClass("active");
})
This is the code:
$(document).ready(function(){
$('.dropdown-submenu > a').on("click", function(e){
$(this).next('ul').toggleClass("active");
e.preventDefault();
e.stopPropagation();
});
$('#mydropdown').on('hidden.bs.dropdown', function () {
$('ul', $(this)).removeClass("active");
})
});
.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 > .dropdown-menu.active {
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;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div id="mydropdown">
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="dropdown-menu" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>Some action</li>
<li>Some other action</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
Even More..
<ul class="dropdown-menu">
<li>3rd level</li>
<li>3rd level</li>
</ul>
</li>
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
I am using Bootstrap 4 button dropdown. I want the dropdown menu to dropup. Using the dropup class as told here How to get a Bootstrap dropdown submenu to 'dropup', I somehow still cannot get the sub menu (Days and Hours in my code) to drop up.
HTML
<div class="dropup">
<button style="width:220px" class="btn btn-secondary dropdown-toggle ml-auto" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Period</button>
<ul class="dropdown-menu dropup multi-level" role="menu" aria-labelledby="dLabel" id="option2">
<li class="dropdown-submenu others">Days
<ul class="dropdown-menu bottom-up" id="days">
<li class="dropdown-item option">1</li>
<li class="dropdown-item option">2</li>
<li class="dropdown-item option">3</li>
<li class="dropdown-item option">4</li>
</ul>
</li>
<li class="dropdown-submenu others">Hours
<ul class="dropdown-menu" id="hours">
<li class="dropdown-item option">1</li>
<li class="dropdown-item option">2</li>
<li class="dropdown-item option">3</li>
<li class="dropdown-item option">4</li>
</ul>
</li>
</ul>
</div>
CSS
<style>
.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.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;
}
</style>
Thank you in advance for the help! :)
I have a multilevel menu that works well in desktop but there is no provision for small devices so the menu just flows all over the place. I have looked at many examples but cannot seem to move forward with coding this.
I am familiar with media queries but just need a starting point or some guidance so I can move forward with the rest of the site. If possible, I would like the submenu to open on hover.
Many thanks
html
<div class="menu">
<ul class="navigation">
<li>Home</li>
<li>Requests
<ul>
<li>Boxes
<ul>
<li>Add Box(es)</li>
<li>Retrievals</li>
<li>Returns</li>
<li>Destructions</li>
<li>Permanent Retrieval</li>
</ul>
</li>
<li>Files
<ul>
<li>Add File(s)</li>
<li>Retrievals</li>
<li>Returns</li>
<li>Destructions</li>
<li>Permanent File Retrieval</li>
</ul>
</li>
<li>Recycle Collection
<ul>
<li>Sacks</li>
<li>Boxes</li>
</ul>
</li>
<li>Box Supply</li>
<li>Sack Supply</li>
</ul>
</li>
<li>Reports</li>
<li>Invoices</li>
<li>Control Panel</li>
<li>Logout</li>
</ul>
<div class="clear"></div>
</div>
css
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #073648;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0 0 0 16px;
background: rgb(58, 58, 58);
font-size: 16px;
}
.navigation li {
float: left;
}
.navigation li:hover {
background: #1a4655;
}
.navigation li:first-child {
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 0 0 5px;
}
.navigation li a {
display: block;
padding: 0 20px;
text-decoration: none;
line-height: 40px;
color: #fff;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
padding: 0;
}
.navigation ul ul {
left: 100%;
top: 0;
}
.navigation ul li {
float: none;
position: relative;
}
.navigation li:hover>ul {
display: block;
background: #1a4655;
/* border: solid 3px #fff;*/
border-top: 0;
/*
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
*/
-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
position: absolute;
width: 250px;
}
.navigation li:hover>ul li:hover {
-webkit-border-radius: 0 0 5px 5px;
/* border-radius: 0 0 5px 5px;*/
}
.navigation li li a:hover {
background: #0c323f;
color: white;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
/*
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
*/
}
The easiest way for a beginner to build responsive websites is to use a framework like Bootstrap.
The new version of this framework, Bootstrap 4, is amazing.
Here's a complete, responsive code example for a working navigation that includes a drop-down that could be turned into a multi-level drop-down:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.navbar-collapse .navbar-nav .dropdown .dropdown-menu{
margin-left: 0px !important;
margin-top: 0px !important;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
transition: all 0.3s ease-in-out 0s;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
.dropdown:hover>.dropdown-menu{
display: block;
}
.dropdown-submenu:hover>.dropdown-menu{
display: block;
}
#media only screen and (max-width: 991px) {
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
transition: all 0.3s ease-in-out 0s;
}
}
.submenuNav{
opacity: 0.8;
margin-right: 3px;
}
.submenuNav:hover{
opacity: 1;
transform: translateX(3px);
transition: 0.4s all ease;
margin-right: 0px;
}
.dropdown-item{
background-color: none !important;
color: #007bff;
opacity: 0.8;
}
.dropdown-item:hover{
background-color: none !important;
color: #007bff;
opacity: 1;
transition: 0.2s all ease;
}
.customNav{
background-color: none !important;
color:#007bff !important;
}
.navbar .navbar-toggler .navbar-toggler-icon{
background-color: #007bff;
}
.dropdown-submenu a:active {
background-color: white;
}
</style>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<!-- Trekking In Nepal -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Trekking in Nepal
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Annapurna Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Annapurna Circuit</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Annapurna Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Upper Mustang</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Everest Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Everest Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Jiri to Everest Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Everest Three Pass</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Langtang Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Langtang Helambu</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Langtang Gosaikunda Lake</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#">Langtang Valley</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
More info:
https://getbootstrap.com/docs/4.0/components/navbar/
i want to add subcategory on the right side of the category when mouse hovers over it . Here in the code
<div class="col-md-3 column margintop20">
<ul class="nav nav-pills nav-stacked">
<li>Option 1<span class="glyphicon glyphicon-chevron-right pull-right"></span> </li>
<li>Option 2<span class="glyphicon glyphicon-chevron-right pull-right"></span> </li>
<li>Option 3<span class="glyphicon glyphicon-chevron-right pull-right"></span> </li>
<li>Option 4<span class="glyphicon glyphicon-chevron-right pull-right"></span> </li>
<li>Option 5<span class="glyphicon glyphicon-chevron-right pull-right"></span> </li>
</ul>
</div>
You need the following code to do it. I have already did it in the past and the code is working perfect. I always use the this code to do it.
EDIT:
Updated JSFiddle Demo
You need to use the following CSS.
/**** Sub DropDown Menus ****/
.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;
}
And you needs to add the following HTML to each list item in your list and it will show the child items on the right on hover.
<li class="dropdown-submenu">Option 1<span class="glyphicon glyphicon-chevron-right pull-right"></span>
<ul class="dropdown-menu">
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
<li>Child4</li>
<li>Child5</li>
</ul>
</li>
Working JSFiddle here.
**** Sub DropDown Menus ****/
.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;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BrandLogo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home Page <span class="sr-only">(current)</span>
</li>
<li id="Configure" class="dropdown">
Configure<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-submenu">
Accounts1
<ul class="dropdown-menu">
<li>Option1
</li>
<li>Option2
</li>
<li>Option3
</li>
<li>Option4
</li>
<li>Option5
</li>
</ul>
</li>
<li class="dropdown-submenu">
Accounts2
<ul class="dropdown-menu">
<li>Option1
</li>
<li>Option2
</li>
<li>Option3
</li>
<li>Option4
</li>
<li>Option5
</li>
</ul>
</li>
<li class="dropdown-submenu">
Accounts3
<ul class="dropdown-menu">
<li>Option1
</li>
<li>Option2
</li>
<li>Option3
</li>
<li>Option4
</li>
<li>Option5
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>