CSS 下拉菜單，帶有子菜單到其他元素的絕對/相對位置

Question

我正在嘗試制作一個水平下拉菜單，其中每個子菜單都將出現在相同的位置（而不是每個子菜單父項下）。 我想在沒有 javascript 的情況下制作它，這是我現在所做的示例（它只是簡單的 css 下拉菜單）：

http://jsfiddle.net/pEdaE/

好吧，我必須發布一些帶有鏈接的代碼，所以我選擇了這個塊來向您展示：

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

這是子菜單的 css，但是當我用絕對或相對位置定位它時，它只會定位在他的父 DIV 中。 我嘗試使用固定位置，但這並不漂亮。

如果這個問題已經得到回答，我很抱歉，但我很難找到關於這個主題的任何內容。 我希望這可以只使用 CSS 來完成。

謝謝

編輯：

我感謝那些參與的人制作的菜單可以在這個FIDDLE 中找到

Answer 1

很有趣的情況。 我喜歡靈活地稍微移動彈出窗口的想法，CBroe 的出色評論讓我想出了這個FIDDLE 。

CSS - 只需轉到“持有人” ul 並使其位置相對。

#nav {
    position: relative;
}

CSS - 然后絕對定位“懸停”元素：

#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;
}

非常感謝CBroe！