CSS Dropdown pushes content down page - html

Question

This is a simple dropdown menu. It's a free template that uses webkit (only learning about what this is). I'm not very good with CSS and I can change so that the dropdown menu will not push the other content down the page, but this creates other problems.
The other problems being that the background of the dropdown menu is no longer red, but transparent and the transition doesn't work.
Additionally, even with a transparent background, when I hover over the dropdown menu, I cannot hover over the entire list without the menu collapsing. For example, in the list below, there are 4 items, Basic, Basic Plus, Ultra, and Ultra Plus. When I've set the ul to position:relative the menu no longer pushes the rest of the content down the page, but when I try to hover over Ultra, the menu goes away.
Here is where I'm developing it:
http://www.oklahomastepparentadoption.com/truck-web/index.php
I really like how the transition works on the entire drop down menu (slide down from the top).
This is the CSS code (HTML below)
.top-nav{
float: right;
width: 70%;
}
.top-nav ul{
padding:0;
margin:0;
}
.top-nav ul li{
display: inline-block;
width: 18%;
margin-right: .4em;
float: left;
position: relative;
}
.top-nav ul li.active{
background: #bb1e10;
}
.top-nav ul li a{
color: #FFF;
font-size: 18px;
margin-right: .4em;
float: left;
padding: 1em 0em 1em 1.4em;
text-align: center;
width: 79%;
}
.top-nav ul li a i{
display: block;
margin-top: 1em;
color: #FFF;
font-size: 11px;
font-style: italic;
}
.top-nav ul ul {
display: none;
left:0;
float: left;
position: relative;
}
.top-nav ul ul li {
float:none;
width:200px;
z-index: 1;
}
.top-nav ul ul li a {
padding: 5px 5px;
}
.top-nav ul li:hover > ul {
display:block;
HTML CODE:
<div class="top-nav">
<span class="menu"><img src="images/menu.png" alt=""></span>
<ul class="nav1" style="margin-top: .5em;">
<li class="hvr-sweep-to-bottom active">Home</li>
<li class="hvr-sweep-to-bottom" style="width:22%;">Fleet Management
<ul class="level_1">
<li>Basic</li>
<li>Basic Plus</li>
<li>Ultra</li>
<li>Ultra Plus</li>
</ul>
</li>
<li class="hvr-sweep-to-bottom">Broker Agency</li>
<li class="hvr-sweep-to-bottom">Drivers</li>
<li class="hvr-sweep-to-bottom">Contact</li>
<div class="clearfix"> </div>
</ul>

Answer 1

Add position: absolute to the menu. Also make sure to update the top and background:
.top-nav ul ul {
display: none;
left: 0;
/* Changes below */
float: none;
position: absolute;
top: 62px;
background: #bb1e10;
}
Preview
Update
Add this to the .header:
.header {
position: relative;
z-index: 10000;
}
Fixes the last links:

Answer 2

Exactly as Praveen says, you need to make the nav absolutely positioned. Make sure though, the container 'header' is relative positioned, else it will fill 40% of the whole screen.
check out this fiddle to see what i mean: https://jsfiddle.net/ho2sph79/
.header {
position:relative;
}
.top-nav {
position:absolute;
width:40%;
top:0;
right:0;
}

Answer 3

you can try this http://callmenick.com/post/slide-down-menu-with-jquery-and-css and as i noticed, your css for the dropdown doesnt have any transition elements. try the link i provided it may help you out regarding transitions