Shift menu down when dropdown menu opens - html

Question

I'm building my website here and I would like my left menu to be shifted down when the dropdown menu opens so that they don't overlap. Here's the HTML code:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
PROJECTS
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li>NAPOLI</li>
<li>PORTRAITS</li>
</ul>
</li>
<li>BIO</li>
<li>CONTACT</li>
<li>BLABLABLA</li>
</ul>
</div>
Anyone could help?
Thanks!
Javascript problem with fadein fadeout
$(document).ready(function(){
$(".nav > li > a").bind("click", function(){
$('.dropdown-menu').fadeOut();
$(this).parent().find('.dropdown-menu').fadeIn();
});
});

Answer 1

What you could do is override the css for the class dropdown-menu.
What I did in the inspector was under .dropdown-menu remove the styles
position:absolute;
float:left;
.dropdown-menu {
position:relative !important; <-- or static
float:none !important;
}
This will make the drop down menu have its own space and not hover over the rest of your menu. But something is also wrong with your toggle. It seems to be broken. The markup looks fine. Did you tamper with the javascript or something?
So for your javascript problem, it is a little hard to test it but try this:
Revised: Based On http://getbootstrap.com/javascript/
$(document).ready(function() {
$('.dropdown').on('show.bs.dropdown', function () {
$('.dropdown-menu',this).fadeIn();
});
$('.dropdown').on('hide.bs.dropdown', function () {
$('.dropdown-menu',this).fadeOut();
});
}

Answer 2

You can achieve this by overriding the bootstrap defaults for absolute positioning and dropdown toggling:
.dropdown.open .dropdown-menu {
display: block;
position: static;
float: none;
width: 200px;
}
And then to keep the menu open, a little bit of JS:
$('#myTabDrop1').on('click', function(e) {
// Remove active tab
$('#myNavbar').find('nav > li.active').removeClass('active');
$(this).parent().addClass('active').addClass('open');
});
New HTML
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
PROJECTS
<ul class="dropdown-menu" role="menu">
<li>NAPOLI</li>
<li>PORTRAITS</li>
</ul>
</li>
<li>BIO</li>
<li>CONTACT</li>
<li>BLABLABLA</li>
</ul>
</div>
JSFiddle