FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Multilevel Dropdown Menu is not directly supported in Bootstrap. But we can easily create it using little bit of customize CSS in our page. we must write a small JQuery codes for it. To cteate a multilevel menu we must override the css class or create our own class and apply it allong with bootstrap classes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/ css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
hr{
margin: 60px 0;
}
.nav{
background-color:#cf4141;
}
.nav-pills>li>a
{
border-radius:0px;
color:#fff;
font-weight:bold;
}
.nav-pills>li.active>a
{
background-color:#aa0000;
}
.nav-pills>li.active>a:hover
{
background-color:#aa0000;
}
.dropdown-toggle
{
background-color:#cf4141!important;
}
.dropdown-menu{
background-color:#cf4141!important;
}
.dropdown-menu>li>a{
color:#fff;
font-weight:bold;
}
.dropdown-menu>li>a:hover {
background-color:#aa0000;
background-image:none;
color:#fff;
}
.divider
{
background-color:#fff;
}
.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 6px;
border-radius:0 6px 6px 6px;
}
.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:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after
{
border-left-color:#555;
}
.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>
<script lang="javascript">
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
</script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-pills">
<li class="active"> <a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li><a href="#">Sent Items</a></li>
<li class="divider"></li>
<li><a href="#">Trash</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Courses <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">.NET</a></li>
<li><a href="#">Java</a></li>
<li class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-toggle">MSOffice </a>
<ul class="dropdown-menu">
<li><a href="#">Word</a></li>
<li class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Excel</a>
<ul class="dropdown-menu">
<li><a href="#">Basic</a></li>
<li><a href="#">Advance</a></li>
</ul>
</li><li><a href="#">Power Point</a></li>
<li><a href="#">Access</a> </li>
</ul></li>
</ul>
</li>
<li class="dropdown pull-right">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li> <a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
</ul></div>
<div class="container"><h3 style="font-size:2vh;">Tutorial At Home</h3>
<p>Free Tutorial for All</p>
</div>
</body>
</html>
