編輯/替換WordPress的TwentyTwelve默認菜單

我試圖編輯Wordpress TwentyTwelve主題的默認菜單。到目前爲止，我已經使子菜單處於水平狀態，但是它們在Firefox中與Chrome不同。在Ff中看起來像我想要的，但在Chrome中，子菜單與先前點擊過的菜單項對齊，而不是在主菜單的最左側。基本上我想要一個水平的兩行菜單。我不能得到的，更‘的位置：’」正確這裏是它的外觀在這兩種瀏覽器：編輯/替換WordPress的TwentyTwelve默認菜單

這裏是它的外觀在這兩種瀏覽器：鉻： http://imageshack.us/photo/my-images/248/cssmenuchrome.jpg/

我不能發佈更多的鏈接。因爲我需要10的聲譽，但在第二圖像（在Firefox菜單）中有太多

下面是我的代碼小提琴至今： http://jsfiddle.net/ZN9my/

.main-navigation li ul ul { 
     top: 0; 
     left: 100%; 
    } 
    .main-navigation .menu-item li { 
     display: none; 
     margin-right: 14px !important; 
    }

來源

2013-03-02 Oh_Franck

如果您將問題隔離到較小的代碼塊，則更有可能得到建設性答案。 – ASGM 2013-03-02 20:41:54

好吧，我編輯並縮短了代碼部分。有一個小提琴可以顯示整個事情。我真的需要幫助！ – 2013-03-08 10:07:23

正如你所說，你的問題在於兩個瀏覽器似乎都在以不同的方式處理position:absolute;。 position:absolute應該根據最近的父元素進行計算，並且明確設置爲position，這意味着它實際上是Chrome，它正在解釋它。

在這種情況下，您已給出.main-navigation li a position:relative，這意味着Chrome將相對於其定位子菜單li.sub-menu。如果您從.main-navigation li的CSS中刪除position-relative，並將其添加到ul#menu-main，那麼li.sub-menu將相對於主導航ul定位，並且應該按照您希望跨越瀏覽器的方式運行。您可能想要將.main-navigation li ul的top從100%更改爲37px之類的東西，因此它仍然位於正確的位置。

我已對jsfiddle進行了更改：http://jsfiddle.net/ZN9my/1/。

來源

2013-03-08 10:29:22 ASGM

非常感謝你！你的解釋清楚而完美;今天我學到了一些東西。非常感謝您的幫助，再次感謝您！ – 2013-03-08 12:38:19

我很高興有幫助！ – ASGM 2013-03-08 13:00:53

我有我的問題的第二部分：一旦你點擊一個子菜單項並進入該頁面，我需要子菜單行保持顯示完整與當前頁面（子菜單項）粗體。我已添加 '.main-navigation .current-menu-item { \t \t display：inline！important; \t}' 但它只顯示「當前」子菜單項，而不是整個列表。我擔心這不是純粹的CSS，但可能需要編輯一些Wordpress行。有沒有簡單的方法？有jsfiddle： [鏈接]（http://jsfiddle.net/v95Bg）我很抱歉再次尋求幫助，但我真的嘗試之前詢問。 – 2013-03-09 10:36:25

編輯/替換WordPress的TwentyTwelve默認菜單

回答

相關問題