Prevent Div from moving

Question

I am working with a website with css drop down menus within the header div. When the drop down menu appears it resizes the header div therefore shoving down the content div.

In the body of my index.php:

<div class="top"></div>
<div class="container">
<?php include_once("header.php"); ?>
<div class="content"></div>
</div>

The header.php

<div class="header">
<div style="display: table-cell; width: 250px; text-align: center;">
LOGO
</div>
<div style="display: table-cell;">
<br><br><br>
<ul>
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Monkey 1</a></li>
<li><a href="#">Monkey 2</a></li>
<li><a href="#">Monkey 3</a></li>
<li><a href="#">Monkey 4</a></li>
<li><a href="#">Monkey 5</a></li>
<li><a href="#">Monkey 6</a></li>
<li><a href="#">Monkey 7</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Monkey 1</a></li>
<li><a href="#">Monkey 2</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">Monkey 1</a></li>
<li><a href="#">Monkey 2</a></li>
<li><a href="#">Monkey 3</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
</div>

And main.css

ul{
    padding: 0;
    list-style: none;
}
ul li{
    float: left;
    width: 100px;
    text-align: center;
}
ul li a{
    display: block;
    padding: 5px 10px;
    color: #333;
    background: #f2f2f2;
    text-decoration: none;
}
ul li a:hover{
    color: #fff;
    background: #939393;
}
ul li ul{
    display: none;
}
ul li:hover ul{
    display: block; /* display the dropdown */
}
.top{
    background: #1b2d3c;
    width: 100%;
    height: 40px;
}
.container{
    width: 1100px;
    height: 1000px;
}
.header{
    display: table-row;
    width: 1100px;
    height: 130px;
}
.content{
    position: absolute;
    background: #fff;
    width: 1100px;
    height: 500px;
}
* {
    background: #87a0b4;
    margin: 0px;
    padding: 0px;
    margin-left: auto ;
    margin-right: auto ;
}

I apologize for the lengthy post. How can I prevent the problem I am having? I want to be sure I am doing things correctly before I get too deep into the project.

Answer 1

You need to change position of ul li:hover ul to absolute, and add some other properties like this JSFiddel (Source)

ul li:hover ul {
    display: block;
    position: absolute;
    width: 100px;
    z-index: 100;
}

Hope this will help you ..

Answer 2

As was said in the previous answer, you need to set position: absolute. I'd like to add a bit of information as to why.

According to MDN:

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.

Basically, by giving an element absolute positioning, it is no longer being taken into account when positioning the rest of the page. It will take up its alloted space in its set position no matter what.

In your case, the div was moving relative to the elements surrounding it. By using position: absolute, you are ommiting and relativity.