j_allen_morris j_allen_morris - 10 days ago 5
CSS Question

CSS Dropdown pushes content down page

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"><a href="index.php">Home</a></li>
<li class="hvr-sweep-to-bottom" style="width:22%;"><a href="fleet.php" style="padding-top:0.25em; padding-bottom:.35em;">Fleet Management</a>
<ul class="level_1">
<li><a href="#">Basic</a></li>
<li><a href="#">Basic Plus</a></li>
<li><a href="#">Ultra</a></li>
<li><a href="#">Ultra Plus</a></li>
</ul>
</li>
<li class="hvr-sweep-to-bottom"><a href="services.php" style="padding-top:0.25em; padding-bottom:.35em;">Broker Agency</a></li>
<li class="hvr-sweep-to-bottom"><a href="blog.php">Drivers</a></li>
<li class="hvr-sweep-to-bottom"><a href="mail.php">Contact</a></li>
<div class="clearfix"> </div>
</ul>

Answer

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

before

after


Update

Add this to the .header:

.header {
    position: relative;
    z-index: 10000;
}

Fixes the last links:

preview