HTML和CSS導航菜單危機

我有一個由嵌套列表組成的垂直導航菜單，但是當子菜單處於活動狀態時，該菜單下的任何內容都不可點擊。HTML和CSS導航菜單危機

例如在下面的鏈接「測試作物」是活躍的，但我不能點擊下面的這兩個鏈接，我看不到在我的HTML或CSS的問題，我認爲該錯誤只在Firefox中顯而易見，在這裏是鏈接http://apigroup.factoryagency.co.uk/browse-products/laminate-board-paper/Test-Crop

來源

2012-02-16 Udders

你可以把你的CSS和HTML更好的可讀性的小提琴嗎？ http://jsfiddle.com – 2012-02-16 06:53:41

這是因爲你有這樣的CSS：

.wrapper { 
    clear: both; 
    margin: 0 auto; 
    position: relative; 
    width: 944px; 
    z-index: 1000; 
}

還有的兩個div類別包裝，具有相同的z-索引。第一個包含導航。第二個包含大量的內容。第二個，因爲它發生在頁面後面，並且具有相同的z-索引，將出現在第一個之上。這意味着它覆蓋了導航，防止被點擊。

解決的辦法是給第一個div.wrapper一個較高的z-index。你可以通過給它一個ID來做到這一點，然後在該ID上設置z-index。

來源

2012-02-16 06:55:52 Interrobang

你的問題是因爲導航菜單是一個.wrapper類的子節點以及主內容區域，它們的Z索引都是999.頁面下方的.wrapper元素在這種情況下將採用z-index優先級。正如您在我的屏幕截圖中所看到的那樣，主要內容區域的優勢和測試公司標題與導航元素重疊。我想補充一個附加的類的主要內容區域和指定的z-index小於999

screenshot

來源

2012-02-16 06:55:38 Anthony

HTML和CSS導航菜單危機

回答

相關問題