drop down is moving the entire site content - html

Question

.menu
{border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; border-top: 1px solid #e9e9e9; overflow: hidden;}
.navbar {
}
.navbar > .active > a
{font-size: 14px; color: #3fbad8; font-family: 'open_sansbold'; background-image: none;
background:#f7f7f7; border: none; text-shadow: none; box-shadow: none;
}
.navbar > .active > a:hover{
box-shadow: none; background: #fff; color: #6f7678;
}
.navbar > li{
border-right: 1px solid #e9e9e9; float: left;display: block;position: relative; z-index:1000;}
.navbar > li>ul{display:none; position:relative;z-index:99}
.navbar > li > a { display:block;
color: #6f7678; padding: 25px; text-shadow: none; font-family: 'open_sansbold';
}
.navbar > li > a:hover{
background: #f7f7f7; color: #3fbad8;
}
.navbar > li:hover ul{display:block; postion:absolute;}
.navbar > li:hover li{float:none;}
.navbar . > li:hover li a:hover{background: #f7f7f7; color: #3fbad8;
}
#sub{
z-index:3;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
<div class="menu">
<div class="navbar">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<i class="fw-icon-th-list"></i>
</a>
<div>
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Services
<ul class="nav"> <li>Printer Service</li>
<li>Computer Support</li>
<li>Email Support</li>
<li>Virus Support</li>
</ul></li>
<li>Testinominals</li>
<li>Price</li>
<li>Contact</li>
</ul>
<div runat="server" class="search-form">
Call Now +1-xxxxxxxxx
</div>
</div>
</div>
</div>
<!-- Menu ends -->
I have changed the position: relative; to position: absolute; however now the drop down goes back to the slide show. I tired a lot to fix this issue still I am unable to do it. Please guide me some one in a right way.

Answer 1

Add this
.menu{
position:absolute;
z-index:1000; //can be any number, but should be high enough to ensure it remains on top
}
It will take the menu out of the normal stacking order - allowing its contents to also be free of the normal DOM flow. That way when you open it, it will sit above the page content without pushing it down.
You will have to add margin to the top of your main content section equal to the height of your closed nav bar so that the content is not hidden behind the nav. You also need to apply the z-index to ensure that it remains on top of any other absolutely positioned elements on the page.