We Keep Coding

How to close toggle when next list is toggled

This is a multi-child dropdown menu, Actually I am trying to toggle a menu one at a time (i.e. only selected menu will show other should close).
Here is my code
HTML
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Master<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-A<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">A1-CHILD</a></li>
<li><a tabindex="-1" href="#">A2-CHILD</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-B<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">B1-CHILD</a></li>
<li><a tabindex="-1" href="#">B2CHILD</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-C <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#">C1-CHILD <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>C1-A</li>
<li>C1-B</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">C2-CHILD <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>C2-A</li>
<li>C2-B</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
JS:
$(document).ready(function{
$(".dropdown-submenu a.test").on("click", function(e){
$(this).next("ul").toggle();
e.stopPropagation();
e.preventDefault();
});
});
CSS:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
This didn't close after another menu toggles and the third level of submenu didn't flexible for the first answer.
thanks,

You need to get closest ul where click event has occur then using .not() exclude it from hiding and then simply use next("ul").toggle(); to show dropdown menu .
Demo code :
$(document).ready(function() {
$(".dropdown-submenu a.test").on("click", function(e) {
//get closest `li`-> ul
var selector = $(this).closest(".dropdown-submenu").find("ul");
//hid all other li and ul
$(".dropdown-submenu ul").not(selector).not(this.closest('ul')).hide()
$(this).next("ul").toggle(); //show this a-> next ul
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Master<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-A<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">A1-CHILD</a></li>
<li><a tabindex="-1" href="#">A2-CHILD</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-B<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">B1-CHILD</a></li>
<li><a tabindex="-1" href="#">B2CHILD</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-C <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#">C1-CHILD <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>C1-A</li>
<li>C1-B</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">C2-CHILD <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>C2-A</li>
<li>C2-B</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Hiding dropdown menu on hover issues

I can see that this question has been asked a bit although I've found no solution that fixes my specific problem.
I have a sub menu within a menu that doesn't work as intended, it simply needs to be shown when hovered over and then when it's not hovered over, hide the sub menu.
Right now I can hover over the menu item but then when I got to select the next option it disappears.
I don't know where I'm going wrong, I know it's a simple feature yet it's driving me mad! here's my working below:
$(document).ready(function() {
$('.dropdown-submenu a.subhover').on("mouseover", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
$(document).ready(function() {
$('.dropdown-submenu a.subhover').on("mouseleave", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
display: hidden;
}
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown menu-btn">
<a id=t estmanage class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-database fa-lg "></i> Manage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="btn_addnew" href="#">Create Audit</a></li>
<li>Departments</li>
<li>Products</li>
<li class="dropdown-submenu">
<a class="subhover" tabindex="-1" href="#"> Data Entry <span class="caret"></span></a>
<ul style="display: none;" class="dropdown-menu">
<li> Labour Costs </li>
<li> Purchases </li>
<li style="cursor: pointer;"><a data-toggle="modal" data-target="#salesModal">Sales</a></li>
<li> Wastage </li>
</ul>
</li>
</ul>
</li>
Forgive me for the formatting of the HTML part, can't get it to look like how it displays on my editor!

This can be done using CSS-Only. Just take a look at my solution:
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
display: none;
}
.subhover:hover ~ .dropdown-menu, .dropdown-menu:hover {
display: block;
}
<li class="dropdown menu-btn">
<a id=t estmanage class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-database fa-lg "></i> Manage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="btn_addnew" href="#">Create Audit</a></li>
<li>Departments</li>
<li>Products</li>
<li class="dropdown-submenu">
<a class="subhover" tabindex="-1" href="#"> Data Entry <span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Labour Costs </li>
<li> Purchases </li>
<li style="cursor: pointer;"><a data-toggle="modal" data-target="#salesModal">Sales</a></li>
<li> Wastage </li>
</ul>
</li>
</ul>
</li>
And in this fiddle, both dropdowns are working together: https://jsfiddle.net/thau2g9j/13/

It's not working because you are executing same lines of code on mouseover and mouseleave. The below code is not required. Comment and check, if that should suffice you requirement.
$(document).ready(function() {
$('.dropdown-submenu a.subhover').on("mouseleave", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
Below is the running code snippet:
$(document).ready(function() {
$('.dropdown-submenu a.subhover').on("mouseover", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
//$(document).ready(function() {
// $('.dropdown-submenu a.subhover').on("mouseleave", function(e) {
// $(this).next('ul').toggle();
// e.stopPropagation();
// e.preventDefault();
// });
//});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
display: hidden;
}
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown menu-btn">
<a id=t estmanage class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-database fa-lg "></i> Manage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="btn_addnew" href="#">Create Audit</a></li>
<li>Departments</li>
<li>Products</li>
<li class="dropdown-submenu">
<a class="subhover" tabindex="-1" href="#"> Data Entry <span class="caret"></span></a>
<ul style="display: none;" class="dropdown-menu">
<li> Labour Costs </li>
<li> Purchases </li>
<li style="cursor: pointer;"><a data-toggle="modal" data-target="#salesModal">Sales</a></li>
<li> Wastage </li>
</ul>
</li>
</ul>
</li>

Change background color of collapse menu

I have dropdown menu on my website. Here is code
<nav class="navbar navbar-custom navbar-fixed-top top-nav-collapse" role="navigation">
<div class="container" style="height:80px;">
<div class="navbar-header" style="">
<button type="button" class="navbar-toggle glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-play-circle"><img style="width:100px;height:50px;" src="/img/logo10.png"></i>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse" >
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#about">О нас</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#Url.Action("Courses","Home")">Курсы</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#Url.Action("Development","Home")">Разработка</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="active">
<a class="page-scroll" href="#contact">Контакты</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="active">
<a class="page-scroll" href="#Url.Action("Index","Blog")">VR Блог</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Now it transparent. I try to change background to red.
Here is code of bootstrap css
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: red;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
margin-bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background-color: red;
}
But it still left transparent. I don't understand where is problem?
How I can change background color of dropdown menu?

Please check it here: https://jsbin.com/hekaxexeki/edit?html,css,output
.navbar-collapse.collapse.in{
background-color:lightgreen;
}

Working snippet:
.navbar-nav > li {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: red;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
margin-bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-custom navbar-fixed-top top-nav-collapse" role="navigation">
<div class="container" style="height:80px;">
<div class="navbar-header" style="">
<button type="button" class="navbar-toggle glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-play-circle"><img style="width:100px;height:50px;" src="/img/logo10.png"></i>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse" >
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#about">О нас</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#Url.Action("Courses","Home")">Курсы</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="">
<a class="page-scroll" href="#Url.Action("Development","Home")">Разработка</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="active">
<a class="page-scroll" href="#contact">Контакты</a>
</li>
<li style="padding-top:10px;font-size:20px;" class="active">
<a class="page-scroll" href="#Url.Action("Index","Blog")">VR Блог</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

You don't address any existing element with your selector. Try this:
.navbar-nav > li {
background-color: red;
}

All you need to do is writing this to your css that you created
.navbar{background-color : red;}

Sub menu on hover over navbar link in bootstrap

I want to to implement a feature in my bootstrap project like whenever someone will hover over my one of navbar links, it will display a detailed menu vertically like a menu in image below
I know how to make dropdown on hover over navbar link, but how can i populate this type of sub menu on hover.
Is already there any tutorial or example exists then do share with me.
If not then share idea!
Thanks!
Html
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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" aria-expanded="false">
<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="#">Brand</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">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

I have tried this, You can use below code :
HTML :
<nav class="navbar navbar-default navbar-static">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large">
Some link
</li>
<li class="dropdown dropdown-large">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Sword of Truth</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Panda</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Sword of Truths</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Theme/Character</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li class="col-sm-6">
<ul>
<li class="dropdown-header">by brand</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Some link
</li>
<li class="dropdown dropdown-large">
Some link
</li>
<li class="dropdown dropdown-large">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Sword of Truths</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Theme/Character</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">by brand</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Sword of Truths</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Theme/Character</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">by brand</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</nav>
CSS :
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body{
font-family: 'Lato', sans-serif;
font-weight:300;
}
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large > li > ul > li {
list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight:300;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
#media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0 ;
margin-right: 0 ;
}
.dropdown-menu-large > li {
margin-bottom: 30px;
}
.dropdown-menu-large > li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}
Fiddle is here Click here

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', 'sans-serif';
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
color: #222;
padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
}
.mega-dropdown-menu .dropdown-header {
font-size: 18px;
color: #ff3546;
padding: 5px 60px 5px 5px;
line-height: 30px;
}
.carousel-control {
width: 30px;
height: 30px;
top: -35px;
}
.left.carousel-control {
right: 30px;
left: inherit;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
font-size: 12px;
background-color: #fff;
line-height: 30px;
text-shadow: none;
color: #333;
border: 1px solid #ddd;
}
</style>
<div class="container">
Toggle navigation
My Store
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
Men <span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Men Collection</li>
<div id="menCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1">
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2">
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3">
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#menCollection" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#menCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<li class="divider"></li>
<li>View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Features</li>
<li>Auto Carousel</li>
<li>Carousel Control</li>
<li>Left & Right Navigation</li>
<li>Four Columns Grid</li>
<li class="divider"></li>
<li class="dropdown-header">Fonts</li>
<li>Glyphicon</li>
<li>Google Fonts</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Plus</li>
<li>Navbar Inverse</li>
<li>Pull Right Elements</li>
<li>Coloured Headers</li>
<li>Primary Buttons & Default</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Much more</li>
<li>Easy to Customize</li>
<li>Calls to action</li>
<li>Custom Fonts</li>
<li>Slide down on Hover</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
Women <span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Features</li>
<li>Auto Carousel</li>
<li>Carousel Control</li>
<li>Left & Right Navigation</li>
<li>Four Columns Grid</li>
<li class="divider"></li>
<li class="dropdown-header">Fonts</li>
<li>Glyphicon</li>
<li>Google Fonts</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Plus</li>
<li>Navbar Inverse</li>
<li>Pull Right Elements</li>
<li>Coloured Headers</li>
<li>Primary Buttons & Default</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Much more</li>
<li>Easy to Customize</li>
<li>Calls to action</li>
<li>Custom Fonts</li>
<li>Slide down on Hover</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Women Collection</li>
<div id="womenCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1">
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2">
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3">
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#womenCollection" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#womenCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<li class="divider"></li>
<li>View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></li>
</ul>
</li>
</ul>
</li>
<li>Store locator</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
My account <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>My cart (0) items</li>
</ul>
</div><!-- /.nav-collapse -->
<script>
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
$(this).toggleClass('open');
}
);
});
</script>
for more visite enter link description here

This may be an option, you just need to adjust the margin and padding to your needs.
Hope it helps. ;)
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.dropdown-menu-fixed {
margin: 0;
padding: 0;
height: auto;
background-color: #fff;
}
.dropdown-menu-fixed > ul {
position: relative;
margin: 1rem 0 0;
padding: 0 0 1rem 0;
min-height: 1px;
float: none;
width: 100%;
}
.dropdown-menu-fixed > ul li {
padding: 3px 20px;
}
.dropdown-menu-fixed a {
display: block;
text-decoration: none;
}
.dropdown-header {
font-weight: bold;
font-size: 13px;
}
#media (min-width: 768px) {
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.dropdown-menu-fixed {
position: fixed;
top: 50px;
width: 100%;
background-color: #fff;
}
.dropdown-menu-fixed > ul {
position: relative;
margin: 1rem 0 0;
padding: 0 0 1rem 60px;
min-height: 1px;
float: left;
width: 33.33333333%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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" aria-expanded="false">
<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="#">Brand</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="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Personal
<span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-fixed">
<ul class="list-unstyled">
<li class="dropdown-header">Dropdown header</li>
<li><a class="small" href="#">Action</a></li>
<li><a class="small" href="#">Another action</a></li>
</ul>
<ul class="list-unstyled">
<li class="dropdown-header">Dropdown header</li>
<li><a class="small" href="#">Action</a></li>
<li><a class="small" href="#">Another action</a></li>
</ul>
<ul class="list-unstyled">
<li class="dropdown-header">Dropdown header</li>
<li><a class="small" href="#">Action</a></li>
<li><a class="small" href="#">Another action</a></li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

try this, it should work for desktop as well as mobile views:
$(document).ready(function(){
$(".dropdown").hover(
function () {
if (!$($(this).parents()[3]).find('.navbar-toggle').is(":visible")) {
$(this).find('.dropdown-toggle').trigger('click');
}
},
function () {
if (!$($(this).parents()[3]).find('.navbar-toggle').is(":visible")) {
$(this).find('.dropdown-toggle').trigger('click');
}
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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" aria-expanded="false">
<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="#">Brand</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">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

jquery fast hover issue

I have a sidebar that have an issue. the issue is that
when i hover mouse over the sidebar slowly it work correctly, but when i move the mouse fast on it, it will mess. how can i fix it?
this is my HTML:
<div class="sidebar">
<ul class="insidenav">
<li class="purple">
<span>ابر پژوهیار</span>
<ul style="display: none;" class="insidenavsubmenu">
<li>کتابخانه من</li>
<li><a target="_blank" href="">اطلاعات کاربر</a></li>
<li>مشخصات کاربر</li>
<li>اطلاعات حساب</li>
<li><a target="_blank" href="">تغیر کلمه عبور</a></li>
<li>خروج</li>
</ul>
</li>
<li class="green">
<a href="" class="link green">
<span>فراداده‌های موضوعی</span>
</a>
</li>
<li class="blue">
<a href="" class="link blue">
<span>استناددهی آنلاین</span>
</a>
</li>
<li class="darkorange">
<a class="link darkorange"><span>دانشنامه استناددهی</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li>همزمان‌سازی</li>
<li>شیوه نگارش مقاله</li>
<li>شیوه نگارش پایان نامه</li>
<li>استناددهی</li>
<li>بیشتر بدانیم...</li>
<li>مثال های استناددهی</li>
</ul>
</li>
<li class="orange">
<span>خرید آنلاین</span>
<ul style="display: none;" class="insidenavsubmenu">
<li><a target="_blank" href="">خرید و دریافت پستی</a></li>
<li>خرید و دریافت آنلاین</li>
<li><a target="_blank" href="">خرید «پژوهیار» از دیجی‌کالا</a></li>
</ul>
</li>
<li class="red">
<a class="link red"><span>کارگاه‌های آموزشی</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li>کارگاه‌های آموزشی برگزار شده</li>
<li>شرایط کارگاه‌های آموزشی</li>
<li>
<a>ثبت نام</a>
<ul class="dubinsidenavsubmenu">
<li>فرم ثبت نام تربیت مدرس</li>
<li>فرم ثبت نام کارگاه سازمانی</li>
<li>فرم ثبت نام کارگاه عمومی</li>
</ul>
</li>
</ul>
</li>
<li class="lightgreen">
<a class="link lightgreen"><span>شبکه مدرسان</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li>استان‌های فعال</li>
<li>رزومه مدرسان</li>
<li>شرایط جذب مدرس</li>
</ul>
</li>
<li class="darkbrown">
<a class="link darkbrown"><span>سفارشی‌سازی</span></a>
<ul class="insidenavsubmenu">
<li>درج شیوه‌نامه در نرم‌افزار</li>
<li>
<a href="">
حمایت از وبگاه‌ها
</a>
</li>
<li>
<a href="">
درج کتابخانه موضوعی
</a>
</li>
</ul>
</li>
</ul>
</div>
and this is my js:
jQuery(window).load(function() {
$('ul.insidenav > li').hover(function () {
if ($(this).find('ul.insidenavsubmenu').length > 0) {
$(this).find('ul.insidenavsubmenu').slideDown('1000');
$(this).addClass('arrow-down');
}
},function() {
if ($(this).find('ul.insidenavsubmenu').length > 0) {
$(this).find('ul.insidenavsubmenu').slideUp();
$(this).removeClass('arrow-down');
}
});
});
jQuery(window).load(function() {
$('ul.insidenavsubmenu > li').hover(function() {
if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
$(this).find('ul.dubinsidenavsubmenu').slideDown('1000');
$(this).addClass('arrow-down');
}
},function () {
if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
$(this).find('ul.dubinsidenavsubmenu').slideUp();
$(this).removeClass('arrow-down');
}
});
});
this is my css:
.sidebar {
width: 18.75em;
height: 200px;
padding: 1.875em 0 1.375em 0;
float: right;
display: table;
}
.sidebar ul.insidenav {margin-bottom: 5px;display: inline;}
.sidebar ul.insidenav li.purple {background-color: #9b59b6;}
.sidebar ul.insidenav li.green {background-color: #6fba45;}
.sidebar ul.insidenav li.blue {background-color: #38afe2;}
.sidebar ul.insidenav li.darkorange {background-color: #e8a061;}
.sidebar ul.insidenav li.orange {background-color: #f1c40f;}
.sidebar ul.insidenav li.red {background-color: #e65947;}
.sidebar ul.insidenav li.lightgreen {background-color: #1ac98f;}
.sidebar ul.insidenav li.darkbrown {background-color: #a07e95;}
.sidebar ul.insidenav li.other1 {background-color: #3E5F8A;}
.sidebar ul.insidenav li.other2 {background-color: #3E5F8A;}
.sidebar ul.insidenav li.other3 {background-color: #3E5F8A;}
.sidebar ul.insidenav li ul.insidenavsubmenu{
color: #fff;
display: none;
margin-right: 65px;
padding-bottom: 5px;
}
.sidebar ul.insidenav li ul.insidenavsubmenu li a{color: #fff;cursor: pointer;font: 8pt IRANSans;}
.sidebar ul.insidenav li ul.insidenavsubmenu li ul.dubinsidenavsubmenu{
color: #fff;
display: none;
margin-right: 15px;
padding-bottom: 5px;
}
.sidebar ul.insidenav li ul.insidenavsubmenu li ul.dubinsidenavsubmenu li a{color: #fff;}

Here is the example that working properly.
jQuery(window).load(function() {
$('ul.insidenav > li').hover(function(e) {
if ($(this).find('ul.insidenavsubmenu').length > 0) {
$(this).find('ul.insidenavsubmenu').stop(true).slideDown('1000');
$(this).addClass('arrow-down');
}
}, function() {
if ($(this).find('ul.insidenavsubmenu').length > 0) {
$(this).find('ul.insidenavsubmenu').stop(true).slideUp();
$(this).removeClass('arrow-down');
}
});
});
jQuery(window).load(function() {
$('ul.insidenavsubmenu > li').hover(function(e) {
if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
$(this).find('ul.dubinsidenavsubmenu').stop(true).slideDown('1000');
$(this).addClass('arrow-down');
}
}, function() {
if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
$(this).find('ul.dubinsidenavsubmenu').stop(true).slideUp();
$(this).removeClass('arrow-down');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<ul class="insidenav">
<li class="purple">
<span>ابر پژوهیار</span>
<ul style="display: none;" class="insidenavsubmenu">
<li>کتابخانه من
</li>
<li><a target="_blank" href="">اطلاعات کاربر</a>
</li>
<li>مشخصات کاربر
</li>
<li>اطلاعات حساب
</li>
<li><a target="_blank" href="">تغیر کلمه عبور</a>
</li>
<li>خروج
</li>
</ul>
</li>
<li class="green">
<a href="" class="link green">
<span>فراداده‌های موضوعی</span>
</a>
</li>
<li class="blue">
<a href="" class="link blue">
<span>استناددهی آنلاین</span>
</a>
</li>
<li class="darkorange">
<a class="link darkorange"><span>دانشنامه استناددهی</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li>همزمان‌سازی
</li>
<li>شیوه نگارش مقاله
</li>
<li>شیوه نگارش پایان نامه
</li>
<li>استناددهی
</li>
<li>بیشتر بدانیم...
</li>
<li>مثال های استناددهی
</li>
</ul>
</li>
<li class="orange">
<span>خرید آنلاین</span>
<ul style="display: none;" class="insidenavsubmenu">
<li><a target="_blank" href="">خرید و دریافت پستی</a>
</li>
<li>خرید و دریافت آنلاین
</li>
<li><a target="_blank" href="">خرید «پژوهیار» از دیجی‌کالا</a>
</li>
</ul>
</li>
<li class="red">
<a class="link red"><span>کارگاه‌های آموزشی</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li>کارگاه‌های آموزشی برگزار شده
</li>
<li>شرایط کارگاه‌های آموزشی
</li>
<li>
<a>ثبت نام</a>
<ul class="dubinsidenavsubmenu">
<li>فرم ثبت نام تربیت مدرس
</li>
<li>فرم ثبت نام کارگاه سازمانی
</li>
<li>فرم ثبت نام کارگاه عمومی
</li>
</ul>
</li>
</ul>
</li>
<li class="lightgreen">
<a class="link lightgreen"><span>شبکه مدرسان</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li>استان‌های فعال
</li>
<li>رزومه مدرسان
</li>
<li>شرایط جذب مدرس
</li>
</ul>
</li>
<li class="darkbrown">
<a class="link darkbrown"><span>سفارشی‌سازی</span></a>
<ul class="insidenavsubmenu">
<li>درج شیوه‌نامه در نرم‌افزار
</li>
<li>
<a href="">
حمایت از وبگاه‌ها
</a>
</li>
<li>
<a href="">
درج کتابخانه موضوعی
</a>
</li>
</ul>
</li>
</ul>
</div>

You should change slideDown duration 1000 and this will down immediately.
$(this).find('ul.dubinsidenavsubmenu').slideDown({duration:10});
You can also take help from this question.