CSS：如何在其下方創建一個帶有子導航菜單的導航菜單？

Question

我現在有一個菜單，可以在這里找到... http://jsfiddle.net/EUaNY/

現在我想要一個與那個樣式相同的子菜單，但是在它下面直接顯示該特定鏈接的子項。 請注意，此菜單位於我的頁面中心， margin: 0 auto; ，頁面width: 978px;為width: 978px; 。 你可以在.header-nav-menu中看到這個。 對不起，如果我沒有包含一些東西，我的CSS非常基本。 如果您有任何問題或任何我會很樂意回答！ 謝謝！

順便說一下，我寧願不使用Javascript，但如果有必要，那就沒關系。

Answer 1

我不確定你是否希望子菜單出現在懸停狀態，但通過添加這兩個類使用直接CSS非常簡單：

.header-nav-menu li > ul {
    display: none;
    position: absolute;
    width: 100%;
    padding: 4px 0;
    background: #3E0C0D;
}

.header-nav-menu li:hover > ul {
    display: block;
}

這是你更新的jsFiddle http://jsfiddle.net/EUaNY/1/

Answer 2

如果你的意思是你希望那個標題中的每個項目都能激發子項目（在垂直或水平方向下），那么就無法用CSS嚴格實現這一點。 抱歉。

在這種情況下，直接Javascript將比在jQuery lib中拋出更復雜。 像這個...

http://www.webchief.co.uk/blog/simple-jquery-dropdown-menu/index.php