CSS dropdown menu with submenu absolute/relative position to other element

Question

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):

http://jsfiddle.net/pEdaE/

Well I have to post some code with link so I picked this block to show you:

.main_menu ul {
  background-color: #efffc7;
  display: none;
  z-index: 100;
  width: 980px;
  height: 324px;
  left:0;
  position: absolute;
}

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.

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.

Thanks

EDIT:

The menu I made thanks to those involved can be found in this FIDDLE

Answer 1

Very interesting situation. I like the idea of having the flexibility to move a popup around a bit, and CBroe's excellent comment allowed me to come up with this FIDDLE.

CSS - just go to the "holder" ul and make its position relative.

#nav {
    position: relative;
}

CSS - then position the "hovered" elements absolutely:

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
    display: block;
    position: absolute;
    top: 50px;
    left: 150px;
}

Thanks very much CBroe!