<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="menu-area">
<div class="container">
<div class="row">
<nav class="navbar navbar-light navbar-expand-lg mainmenu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="active">
<a href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown2
<i class="fa fa-angle-down only-mobile" aria-hidden="true"></i>
<i class="fa fa-angle-right only-desktop" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown3
<i class="fa fa-angle-down only-mobile" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Service</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
.menu-area {
background-color: #131d33;
}
.dropdown-menu {
padding: 0;
margin: 0;
border: 0 solid transition!important;
border: 0 solid rgba(0, 0, 0, .15);
border-radius: 0;
-webkit-box-shadow: none!important;
box-shadow: none!important
}
/*.mainmenu a,*/
.navbar-default .navbar-nav > li > a,
.mainmenu ul li a,
.navbar-expand-lg .navbar-nav .nav-link {
color: #fff;
font-size: 16px;
text-transform: capitalize;
padding: 16px 15px;
font-family: 'Roboto', sans-serif;
display: block !important;
}
.mainmenu .active a,
.mainmenu .active a:focus,
.mainmenu .active a:hover,
.mainmenu li a:hover,
.mainmenu li a:focus,
.navbar-default .navbar-nav>.show>a,
.navbar-default .navbar-nav>.show>a:focus,
.navbar-default .navbar-nav>.show>a:hover {
color: #fff;
background-color: #0f3c9e;
outline: 0;
}
.navbar-light .navbar-toggler{
padding: 0;
}
.navbar-light .navbar-toggler .fa-bars{
color: #fff;
border: 1px solid #fff;
padding: 5px 10px;
}
.only-mobile{
display: none;
}
.only-desktop{
display: block;
}
/*==========Sub Menu=v==========*/
.mainmenu .collapse ul > li:hover > a {
background-color: #0f3c9e;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.mainmenu .collapse ul ul > li:hover > a
/*.navbar-default .navbar-nav .show .dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .show .dropdown-menu > li > a:hover*/ {
background-color: #0f3c9e;
}
.mainmenu .collapse ul ul ul > li:hover > a {
background-color: #0f3c9e;
}
.mainmenu .collapse ul ul,
.mainmenu .collapse ul ul.dropdown-menu {
background-color: #131d33;
}
.mainmenu .collapse ul ul ul,
.mainmenu .collapse ul ul ul.dropdown-menu {
background-color: #131d33
}
.mainmenu .collapse ul ul ul ul,
.mainmenu .collapse ul ul ul ul.dropdown-menu {
background-color: #131d33
}
/******************************Drop-down menu work on hover**********************************/
.mainmenu {
background: none;
border: 0 solid;
margin: 0;
padding: 0;
min-height: 20px;
width: 100%;
}
@media only screen and (min-width: 767px) {
/* Level 1 */
.mainmenu .collapse ul ul {
position: absolute;
top: 80px;
left: 0;
min-width: 250px;
display: block;
visibility: hidden;
opacity: 0;
-webkit-transition: 0.5s ease all;
transition: 0.5s ease all;
}
.mainmenu .collapse ul li:hover> ul {
visibility: visible;
opacity: 1;
top: 100%;
}
/* Level 2 */
.mainmenu .collapse ul ul li {
position: relative;
}
.mainmenu .collapse ul ul ul {
position: absolute;
top: 0;
left: 120%;
min-width: 250px;
display: block;
visibility: hidden;
opacity: 0;
-webkit-transition: 0.5s ease all;
transition: 0.5s ease all;
}
.mainmenu .collapse ul ul li:hover> ul {
visibility: visible;
opacity: 1;
top: 0;
left: 100%;
}
.mainmenu .collapse ul ul li a .fa-angle-right{
position: absolute;
right: 20px;
top: 20px;
}
/* Level 3 */
.mainmenu .collapse ul ul ul li {
position: relative
}
.mainmenu .collapse ul ul ul ul {
position: absolute;
top: 0;
left: -120%;
min-width: 250px;
display: block;
z-index: 1;
visibility: hidden;
opacity: 0;
-webkit-transition: 0.5s ease all;
transition: 0.5s ease all;
}
.mainmenu .collapse ul ul ul li:hover ul {
visibility: visible;
opacity: 1;
top: 0;
left: -100% !important;
}
}
@media only screen and (max-width: 767px) {
.only-mobile{
display: inline-block;
}
.only-desktop{
display: none;
}
/*.navbar-nav .show .dropdown-menu .dropdown > li > a{
background-color: #fff;
}*/
.mainmenu .collapse ul ul > li.dropdown > a,
.mainmenu .collapse ul ul > li.dropdown > ul.dropdown-menu > li.dropdown > a{
background-color: #0f3c9e;
padding: 16px 15px 16px 15px;
}
.navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a,
.navbar-nav .show .dropdown-menu .dropdown-menu > li > a,
.navbar-nav .show .dropdown-menu > li > a {
padding: 16px 15px 16px 35px;
background-color: #202e4c;
}
.navbar-nav .show .dropdown-menu .dropdown-menu > li > a:hover,
.navbar-nav .show .dropdown-menu > li > a:hover{
background-color: #0f3c9e;
}
/* Level 1 mobile arrow */
.mainmenu ul li a .fa-angle-down{
position: absolute;
right: 15px;
top: 15px;
width: 25px;
height: 25px;
background-color: #fff;
color: #0f3c9e;
text-align: center;
line-height: 25px;
}
}
/*custom css*/
.mainmenu ul li a.dropdown-toggle::after{
display: none;
}
(function($){
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
})(jQuery)
