爲什麼我的Wordpress菜單不能正常工作？

我實際上跟着一個Lynda.com視頻有關使用Underscores從零開始構建一個Wordpress網站。爲什麼我的Wordpress菜單不能正常工作？

我們正在設計style.css中的下拉菜單。

默認代碼看起來像這樣和精細的工作：

.main-navigation ul ul { 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
    float: left; 
    position: absolute; 
    top: 1.5em; 
    left: -999em; 
    z-index: 99999; 
}

但是，因爲我們需要改變它的外表，他教導我們要改變它到該代碼，而不是：

.main-navigation ul ul { 
    position: absolute; 
    left: 0; 
    z-index: 99999; 
    display: none; 
    float: left; 
    padding: 0; 
    background: #4d4d4d; 
    background: hsl(0, 0%, 30%); 
}

突然之間，這些下降是不響應的。

我認爲我將問題指向「display：none;」但是拿出來只會導致一團糟。我試着只是增加的背景顏色是這樣的：

.main-navigation ul ul { 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
    background: #4d4d4d; 
    background: hsl(0, 0%, 30%); 
    float: left; 
    position: absolute; 
    top: 1.5em; 
    left: -999em; 
    z-index: 99999; 
}

，但它結束了看起來像這樣：

Screenshot of Wordpress drop-down menu over the menu links

很顯然，我希望這個下拉下面的鏈接，而不是在前面。任何人都可以告訴我如何解決這個問題？

編輯：我很欣賞迄今爲止嘗試回答的人，但都沒有答案是正確的。感謝大衛，我把我的代碼放入jsfiddle.net：http://jsfiddle.net/DMDesigns/5g9kbf9s/2/

請讓我知道，如果你們其中一個可以弄明白，使用這個！謝謝！

來源

2014-09-19 FreakFlag

這段代碼沒有上下文，就像一些標記和周圍的CSS沒有任何內容，請嘗試添加更多信息，以便人們可以給予幫助，否則只是猜測 – Devin 2014-09-19 23:57:44

顯示：無第一次加載時用於隱藏菜單。 Js用於顯示正確的元素何時被它的外觀所點擊。你的問題是你沒有顯示html。看看www.jsfiddle.net你可以在那裏顯示HTML和CSS，然後我們可以很容易地修改它，並得到你想要的結果。（順便說一句，右鍵單擊'查看源代碼'以查找要輸入的html）。CSS經常可以試試看，而不是這樣做，它的工作原理，但它並不那麼辛苦......最終:) – David 2014-09-20 01:35:00

謝謝，@大衛。這是超級有用的。我會用鏈接編輯我的文章。 – FreakFlag 2014-09-24 20:36:34

我仍然不知道爲什麼他的代碼打破了網站，但我確實解決了這個問題我有。我想我應該發佈它，以防萬一其他人有類似的問題。

我離開了原來的代碼，但添加了背景顏色，並將「top」從1.5em更改爲3em，以使其正確加載。

.main-navigation ul ul { 
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
float: left; 
position: absolute; 
top: 3.0em; 
left: -999em; 
z-index: 99999; 
background: #9adcfd;

}

感謝大家誰試過！

來源

2014-09-24 21:44:42 FreakFlag

與left: -999em;和display: none;內容正在消失

.main-navigation ul ul { 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
    background: #4d4d4d; 
    float: left; 
    position: fixed; 
    top: 1.5em; 
    left: 1.5em; 
    z-index: 99999; 
}

來源

2014-09-19 23:39:57 AvrilAlejandro

使用原始代碼中使用的左側位置的值：

.main-navigation ul ul { 
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
background: #4d4d4d; 
background: hsl(0, 0%, 30%); 
float: left; 
position: absolute; 
top: 1.5em; 
left: 0; 
z-index: 99999; 

}

，而不是：

.main-navigation ul ul { 
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
background: #4d4d4d; 
background: hsl(0, 0%, 30%); 
float: left; 
position: absolute; 
top: 1.5em; 
left: -999em; 
z-index: 99999; 
}

來源

2014-09-20 01:43:03

爲什麼我的Wordpress菜單不能正常工作？

回答

相關問題