title: CSS drop-down menus pushing page content down
body: <p>This is probably (hopefully) a pretty simple question, but I can't seem to get it to work so I'll turn to the experts here. I'm using a pretty straightforward CSS drop-down menu, with just a little JQuery involved. The issue is that when I hover over the drop-down and it opens, it's pushing everything on the page down below it rather then opening over it. I've tried messing with the z-index but that doesn't seem to be the issue. Any tips would be fantastic, thanks in advance.</p>
  
  <p>Here's the HTML; sorry it's not super-pretty, I had to rip out a bunch of stuff to make it simple and generic.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
  &lt;HTML style="zoom: 100%; "&gt; 
  &lt;HEAD&gt; 
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; 
  &lt;/HEAD&gt; 
  &lt;BODY class="bodyclass" style="background:#BCE2F1; height: 100%;"&gt; 
  
  &lt;DIV id="maincontainer" style="min-height: 100%;"&gt; 
    &lt;STYLE type="text/css"&gt; 
      #cssdropdown, #cssdropdown ul { font-size: 9pt; background-color: black; list-style: none; }
      #cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
      #cssdropdown li.headlink { width: 140px; float: left; margin-left: -1px; border: 1px black solid;
            background-color: white; text-align: center; }
      #cssdropdown li.headlink a { display: block; color: #339804; padding: 3px; text-decoration: none; }
        #cssdropdown li.headlink a:hover { background-color: #F8E0AC; font-weight: bold; }
      #cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; }
      #cssdropdown li.headlink:hover ul { display: block; text-decoration: none; }
      #cssdropdown li.headlink ul li a { padding: 5px; height: 15px; }
      #cssdropdown li.headlink ul li a:hover { background-color: #CCE9F5; text-decoration: none; font-weight: normal; }
      /* #cssdropdown a { color: #CCE9F5; } */
        #cssdropdown ul li a:hover { text-decoration: none; }
      #cssdropdown li.headlink { background-color: white; }
      #cssdropdown li.headlink ul { background-color: white; background-position: bottom; padding-bottom: 2px; }
    &lt;/STYLE&gt; 
    &lt;SCRIPT language="JavaScript"&gt; 
      $(document).ready(function(){
          $('#cssdropdown li.headlink').hover(
              function() { $('ul', this).css('display', 'block'); },
              function() { $('ul', this).css('display', 'none'); });
      });
    &lt;/SCRIPT&gt; 
  
    &lt;DIV class="navigation_box" style="border: none;"&gt; 
      &lt;DIV class="innercontent"&gt; 
        &lt;DIV style="background: white; float: left; padding: 5px; border: solid 1px black;"&gt; 
        LOGO
        &lt;/DIV&gt; 
        &lt;DIV class="navmenu" style="float: right; bottom: 0; font-size: 9pt; text-align: right;"&gt; 
          &lt;SPAN&gt;Logged in as user@example.com&lt;/SPAN&gt;&lt;BR&gt; 
          &lt;UL id="cssdropdown"&gt; 
              &lt;LI class="headlink"&gt; 
                  &lt;A href="http://localhost:3000/one"&gt;One&lt;/A&gt; 
  
                  &lt;UL style="display: none; "&gt; 
                      &lt;LI&gt;&lt;A href="http://localhost:3000/one"&gt;Option One&lt;/A&gt;&lt;/LI&gt; 
                      &lt;LI&gt;&lt;A href="http://localhost:3000/one"&gt;Option Two&lt;/A&gt;&lt;/LI&gt; 
                      &lt;LI&gt;&lt;A href="http://localhost:3000/one"&gt;Option Three&lt;/A&gt;&lt;/LI&gt; 
                      &lt;LI&gt;&lt;A href="http://localhost:3000/one"&gt;Option Four&lt;/A&gt;&lt;/LI&gt; 
                  &lt;/UL&gt; 
              &lt;/LI&gt; 
              &lt;LI class="headlink"&gt; 
                  &lt;A href="http://localhost:3000/two"&gt;Two&lt;/A&gt; 
  
                  &lt;UL style="display: none; "&gt; 
                      &lt;LI&gt;&lt;A href="http://localhost:3000/two"&gt;Option Two-One&lt;/A&gt;&lt;/LI&gt; 
                      &lt;LI&gt;&lt;A href="http://localhost:3000/two"&gt;Option Two-Two&lt;/A&gt;&lt;/LI&gt; 
                      &lt;LI&gt;&lt;A href="http://localhost:3000/two"&gt;Option Two-Three&lt;/A&gt;&lt;/LI&gt; 
                  &lt;/UL&gt; 
              &lt;/LI&gt; 
              &lt;LI class="headlink" style="width: 80px;"&gt; 
                &lt;A href="http://localhost:3000/three"&gt;Three&lt;/A&gt; 
              &lt;/LI&gt; 
              &lt;LI class="headlink" style="width: 300px; padding-top: 2px; height: 19px;"&gt; 
                &lt;FORM action="http://localhost:3000/search" method="post"&gt; 
                    &lt;P&gt; 
                      Search:
                      &lt;INPUT id="searchwords" name="searchwords" size="20" type="text" value=""&gt; 
                      &lt;INPUT name="commit" type="submit" value="Find"&gt; 
                    &lt;/P&gt; 
                &lt;/FORM&gt; 
              &lt;/LI&gt; 
            &lt;LI class="headlink" style="width: 60px;"&gt; 
              &lt;A href="http://localhost:3000/four"&gt;Four&lt;/A&gt; 
            &lt;/LI&gt; 
            &lt;LI class="headlink" style="width: 60px;"&gt; 
                          &lt;A href="http://localhost:3000/logout"&gt;Logout&lt;/A&gt; 
        &lt;/LI&gt; 
          &lt;/UL&gt; 
        &lt;/DIV&gt; 
      &lt;/DIV&gt; 
    &lt;/DIV&gt; 
    &lt;DIV id="contentwrapper" style="clear:both"&gt; 
      &lt;DIV class="innercontent" style="margin: 0px 20px 20px 20px;"&gt; 
        &lt;H1&gt;Some test content here to fill things out a little bit.&lt;/H1&gt; 
      &lt;/DIV&gt; 
    &lt;/DIV&gt; 
  &lt;/DIV&gt; 
  &lt;DIV id="footer" style="clear: both; float: bottom;"&gt; 
    &lt;DIV class="innercontent" style="font-size: 10px;"&gt; 
      Copyright 2008-2010
    &lt;/DIV&gt; 
  &lt;/DIV&gt; 
  &lt;/BODY&gt; 
  </code></pre>