Display affected by drop down using CSS - html

Question

I've got a nav bar configured to hide drop down elements (using display:none) until hovered over when it will show as a drop down (using display:block at a:hover). It all works great except the "divs" below it are pushed down when drop down displays. How can I get the "divs" to remain in place regardless of the display of the drop down items?
Thanks!

Answer 1

I hope it helps you
<h1>Simple Pure CSS Drop Down Menu</h1>
<ul class="nav">
<li>Menu1
<ul>
<li>Sub menu1</li>
<li>Sub menu2</li>
<li>Sub menu3</li>
<li>Sub menu4
<ul>
<li>Deep menu1</li>
<li>Deep menu2
<ul>
<li>Sub deep menu1</li>
<li>Sub deep menu2</li>
<li>Sub deep menu3</li>
</ul>
</li>
<li>Deep menu3</li>
</ul>
</li>
<li>Sub menu5</li>
</ul>
</li>
<li>Menu2
<ul>
<li>Sub menu1</li>
<li>Sub menu2</li>
<li>Sub menu3</li>
</ul>
</li>
<li>Menu3
<ul>
<li>Sub menu1</li>
<li>Sub menu2
<ul>
<li>Category1</li>
<li>Category2</li>
<li>Category3</li>
<li>Category4</li>
<li>Category5</li>
</ul>
</li>
<li>Sub menu3</li>
<li>Sub menu4</li>
<li>Sub menu5</li>
</ul>
</li>
</ul>
.nav {
margin: 15px 0 0;
}
.nav li {
display: inline-block;
width: 150px;
position: relative;
text-align: center;
}
.nav li:hover {
background: #f6f6f6;
}
.nav li a {
display: block;
padding: 10px 15px;
}
.nav ul {
display: none;
position: absolute;
}
.nav ul li {
display: block;
}
.nav li:hover ul {
display: block;
}
.nav li:hover ul li ul {
display: none;
}
.nav li ul li:hover ul {
display: block;
left: 100%;
top: 0;
}
.nav li ul li:hover ul li ul {
display: none;
}
.nav li ul li ul li:hover ul {
display: block;
}
fiddle

Answer 2

The <div> elements which contain the dropdown parts have to have position: absolute. That way they don't occupy any space in the surrounding containers. Tune their position n relation to their parent elements with the top and left (or right) settings.
The parent elements of those DIVs need to have position: relative to enable the absolute positioning of their children elements.
By the way, position: fixed wouldn't work that well, since this positions an element absolutely to the window, which in most cases you don't want (exception: if you have a fixed navbar).