2015-05-15 15 views
0

我有一個網站:http://stoogle.staging.wpengine.com用於Wordpress中的其他菜單項的CSS

我想添加第三層到主菜單,這不是僅支持第二層的主題的默認功能。

我設法改變主題中的header.php文件,通過改變從2到3的深度屬性得到一個3級:

<?php 
if (has_nav_menu('main_navigation')) { 
    wp_nav_menu(array(
     'theme_location' => 'main_navigation', 
     'container' => false, 
     'menu_class' => 'main-nav list-unstyled', 
     'link_before' => '<span>', 
     'link_after' => '</span>', 
     'items_wrap' => '<nav id="main-nav-wrapper"><ul id="%1$s" class="%2$s">%3$s</ul></nav>', 
     'depth' => 3, 
     'walker' => new vw_main_menu_walker() 
    )); 
} 
?> 

我現在的問題是,現在的第三級只是顯示在第二級,所以我認爲我需要使用CSS來移除它,但我不確定哪些CSS類需要添加/編輯,以及需要輸入哪些CSS。

我想經過一番玩弄正確類:

.main-nav .sub-menu-item .sub-menu-item { 

} 

所以現在需要知道什麼CSS應該是輸入,使其正確顯示爲一個通常會從菜單期待。

預先感謝任何幫助:)

+0

我創建了一個名爲第一級與第二級兒童和有第三級一個項目的菜單項兒童。正如人們可以看到的,它呈現在二級兒童身上,所以你不能再訪問它們,它應該顯示在右邊。 – umlungu

回答

1

你可以嘗試這樣的事情,然後玩

.sub-menu.menu-even.sub-sub-menu.menu-depth-2 { 
    background: #fff000 !important; 
    left: 50% !important; 
    position: absolute; 
} 
+0

太棒了,那就是訣竅! – umlungu

+0

你介意解釋最新情況背後的邏輯嗎? 我還在學習,所以想知道實際發生的情況。 – umlungu

+0

這是我在檢查頁面時使用Firefox和Chrome上的Web開發者工具(firebug)的簡單CSS路徑 - >菜單 - >子菜單 - >子菜單ul html。 然後我們正在做的是將這個子子菜單ul類定位到aboslute,然後將它從左側移動50%並給出背景顏色。 –