title: Making drop-down navigation menus not affect other element positioning
body: <p>was wondering if there was a better way to handle what I'm trying to do. I've made a basic drop-down navigation menu where the menu bars are li and class elements with a set height with the overflow property set to hidden, which then animate in height to reveal the 'drop down' portion of the animation when hovered over with the mouse. I found however that other web page elements (like main content) would then be pushed around and re-positioned when the menu elements collided with them. I stop-gap fixed this by making the affected elements absolute positioning, but I can't help but feel there's a better, more effective way of fixing this.</p>
  
  <p>Is there any way to make it so the navigation elements for lack of better word get 'ignored' positioning-wise?</p>
  
  <p>Here it is in practice - the first 'article' area has been made to be absolute positioned - <a href="http://gamearticlesite.bbdesigns.ca/index.html" rel="nofollow">http://gamearticlesite.bbdesigns.ca/index.html</a></p>
  
  <p>the code:</p>
  
  <p>Jquery</p>
  
  <pre><code> //When mouse rolls over  
      $("li.extend").mouseover(function(){  
          $(this).stop().animate({height:'250px'},{queue:false, duration:500})  
      });  
  
      //When mouse is removed  
      $("li.extend").mouseout(function(){  
          $(this).stop().animate({height:'35px'},{queue:false, duration:500})  
      });  
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#headerNav ul{
      list-style-type: none;
      color:#efefef;  
      margin:0;
      margin-left:75px;
      padding:0;  
  }
  
  #headerNav ul li{
      width:125px;  
      height:35px;  
      float:left;  
      color:#efefef;  
      text-align:center;      
      margin-left:10px;
      margin-right:10px;
      overflow:hidden;
  }
  </code></pre>