title: CSS Dropdown pushes content down page
body: <p>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.</p>
  
  <p>The other problems being that the background of the dropdown menu is no longer red, but transparent and the transition doesn't work.</p>
  
  <p>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 <strong>ul</strong> to <em>position:relative</em> 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.</p>
  
  <p>Here is where I'm developing it:</p>
  
  <p><a href="http://www.oklahomastepparentadoption.com/truck-web/index.php" rel="nofollow noreferrer">http://www.oklahomastepparentadoption.com/truck-web/index.php</a></p>
  
  <p>I really like how the transition works on the entire drop down menu (slide down from the top).  </p>
  
  <p>This is the CSS code (HTML below)</p>
  
  <pre><code>.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 &gt; ul {
      display:block;
  </code></pre>
  
  <p>HTML CODE:</p>
  
  <pre><code>            &lt;div class="top-nav"&gt;
                  &lt;span class="menu"&gt;&lt;img src="images/menu.png" alt=""&gt;&lt;/span&gt;
  
                  &lt;ul class="nav1" style="margin-top: .5em;"&gt;
                      &lt;li class="hvr-sweep-to-bottom active"&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="hvr-sweep-to-bottom" style="width:22%;"&gt;&lt;a href="fleet.php" style="padding-top:0.25em; padding-bottom:.35em;"&gt;Fleet Management&lt;/a&gt;
                          &lt;ul class="level_1"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Basic&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Basic Plus&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Ultra&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Ultra Plus&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li class="hvr-sweep-to-bottom"&gt;&lt;a href="services.php" style="padding-top:0.25em; padding-bottom:.35em;"&gt;Broker Agency&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="hvr-sweep-to-bottom"&gt;&lt;a href="blog.php"&gt;Drivers&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="hvr-sweep-to-bottom"&gt;&lt;a href="mail.php"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;div class="clearfix"&gt; &lt;/div&gt;
                  &lt;/ul&gt;
  </code></pre>