title: Use div as a dropdown menu overlapping other contents?
body: <p>Is there any way for me to use a div as a dropdown menu positio exactly like <a href="http://i49.tinypic.com/16bk861.png" rel="nofollow" title="this">this</a>? I already tried absolute position but it doesn't work with other screen size. What I want is for it to work on all screen resolutions. I tried using tables(hiding the td and showing it on hover)but the menu just pushes the contents below it. I desperately need to get this sorted out I've been working on it for weeks now and still not even close to what I want. Thank you in advance.</p>
  
  <p>What I tried so far:
  jQuery:</p>
  
  <pre><code>$(document).ready(function(){
     $("#hover-here").hover(function(){
       $("#boxed-menu-div").toggle();
    });
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#boxed-menu-div{
    display: none;
    position: absolute;
    top: 100px;
    right: 246px;
   }
  </code></pre>
  
  <p>This works perfectly only on my screen resolution. I used relative positioning but it only pushes the contents below. Is there any other alternatives to what absolute can do?</p>