title: CSS dropdown menu with submenu absolute/relative position to other element
body: <p>I'm trying to make a horizontal drop-down menu where every submenu will appear in the same position (not under every submenu parent). I want to make this without javascript and this is example of what I have done for now (it's just plain css dropdown menu):</p>
  
  <p><a href="http://jsfiddle.net/pEdaE/" rel="nofollow">http://jsfiddle.net/pEdaE/</a></p>
  
  <p>Well I have to post some code with link so I picked this block to show you:</p>
  
  <pre><code>.main_menu ul {
    background-color: #efffc7;
    display: none;
    z-index: 100;
    width: 980px;
    height: 324px;
    left:0;
    position: absolute;
  }
  </code></pre>
  
  <p>This is css for submenu, but when I position it with position absolute or relative, it will just be positioned in his parent DIV. I tried using fixed position, but that's not pretty.</p>
  
  <p>I'm sorry if this question was already answered but I was having difficulties finding anything on this topic. I hope this can be done using only CSS.</p>
  
  <p>Thanks</p>
  
  <p>EDIT:</p>
  
  <p>The menu I made thanks to those involved can be found in this <a href="http://jsfiddle.net/e_scape/GuTS6/" rel="nofollow">FIDDLE</a></p>