Wordpress菜單類上的CSS格式化

我的水平WordPress菜單上有以下格式。它效果很好。Wordpress菜單類上的CSS格式化

.menu { 
    width: 1100px; 
    margin: 0 auto; 
    position: relative; 
    z-index: 50; 
    list-style: none; 
}

在我的主題的頁腳中，我嘗試通過WordPress菜單設置使用垂直菜單。當我通過一個小窗口將菜單中的頁腳我得到這個：

<div class="menu-footer-container"><ul id="menu-footer" class="menu">

由於UL類是菜單它拿起以上水平的CSS，使菜單的水平在我的頁腳。如何添加CSS使我的WordPress頁腳垂直菜單？

來源

2015-06-08 user1609391

這樣做的結果可以幫助我們爲您找到解決方案。 –

@ user1609391如果我的答案幫助你，請考慮標記我的答案是正確的:) –

<ul id="menu-footer" class="menu-ver">

您可以使用不同的類例如menu-ver有下面的CSS，

.menu-ver { 
    width: 200px; 
    margin: 0 auto; 
    position: relative; 
    z-index: 50; 
    list-style: none; 
} 
.menu-ver li{ 
    width: 100%; 
}

您也可以根據您的設計調整邊距屬性，如果你不希望它得到集中做。

來源

2015-06-08 20:08:24 dsaket

.menu-footer-container .menu li { 
    display: inline; 
}

使用此代碼，它會很好地工作。謝謝

來源

2015-06-08 20:21:47

我不認爲它是在.menu類的問題，我假設你的樣式表的某個地方的問題是它的CSS樣式爲li標籤。

它應該看起來像這樣：.menu li {display:inline-block;}。

#menu-footer li { 
    display: list-item; 
}

看看這個online example on jsFiddle

不管怎麼說，如果你還是想風格.menu類只是頁腳：您可以通過給定的風格只爲li標籤爲您的頁腳這樣解決這個問題，你可以這樣做：

.menu-footer-container .menu { ... }或只是樣式#menu-footer { ... }與理想的結果。

來源

2015-06-08 20:31:22

Wordpress菜單類上的CSS格式化

回答

相關問題