I have this mega-menu created with bootstrap-3
<nav class="yamm navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand navbar-brand-centered">
<a href="#">Logo</a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown yamm-fw">
<a href="#" data-toggle="dropdown" class="dropdown-toggle" tabindex="0">Some Procedure</a>
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-md-9 col-sm-6 bg1 nopadding">
<div class="megamenu">
<h4>Some Text Some Text Some Text </h4>
<hr />
<ul>
<li><span>Some Text Some Text Some Text Some Text Some Text </span></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown yamm-fw">
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row"></div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown yamm-fw">
<a href="#" data-toggle="dropdown" class="dropdown-toggle" tabindex="0">Search Here</a>
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-md-12 col-sm-12 bg1 searchbg">
<div class="megamenu">
<form role="form">
<div class="form-group">
<label for="email">Pick A Date</label>
<input type="datepicker" class="form-control" id="datepicker">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
The last menu drop-down has form and I'm trying it to stay visible on page load and it does stay visible using style="display: block !important" but as soon as cursor move away from drop-down it close it-self.
Drop-down menu visible on mouse hover
$('.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(300);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(300);
});
2nd problem I'm facing is form has datepicker input and when click on input to select date, calendar shows but drop-down with form behind calendar close itself.
What I've tried possible solutions and answers here and here and here but nothing works or may be I'm doing it all wrong.
The last menu drop-down has form and I'm trying it to stay visible on page load and it does stay visible using style="display: block !important"
You need to exclude the 'stayopen' element from the hover rule
$('.dropdown').hover(function() {
$(this).find('.dropdown-menu:not(#stayopen)').stop(true, true).delay(100).fadeIn(300);
}, function() {
$(this).find('.dropdown-menu:not(#stayopen)').stop(true, true).delay(100).fadeOut(300);
});
Additionally you also need to add the following CSS so that the hover menu item appears on top of the search box
#stayopen {
z-index: 1;
}
and the following so that that the hover menu item doesn't hide part of the search menu when it comes up
.yamm-fw > .dropdown-menu
{
background-color: transparent;
}
Note that you might need to change the z-index (increase it so that it appears over the body content if there is anything under it) and the above selector (to make it more specific) a bit depending on the other markup in your page.
Fiddle - http://jsfiddle.net/ymxh5hru/
Note - the original answer was based on incorrect assumption of what was required.