2015-08-14 52 views
-1

我的工作在這裏網站:http://www.estiponagroup.com/dev/當前菜單項的造型在WordPress

我想在主導航當前菜單項是白色的,而不是灰色的。在這種情況下,如果您位於主頁,則導航中的主頁鏈接將變爲白色。

無論我嘗試它仍然灰色。

.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li > a, 
 

 

 
    .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li > a { 
 

 

 
     color: #ccc; 
 

 

 
     text-transform: uppercase; 
 

 

 
    } 
 

 

 
    .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li > a:hover, 
 

 

 
    .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li > a:hover { 
 

 

 
     color: #ccc; 
 

 

 
     text-transform: uppercase; 
 

 

 
     text-decoration: underline; 
 

 

 
    } 
 

 

 
    .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li.current_page_item > a, 
 

 

 
    .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li.current_page_item > a { 
 

 

 
     color: #fff; 
 

 

 
    }
<div class="standard-menu-container menu-skin-main reveal-from-top"> 
 

 
    <a href="#" class="menu-bar menu-skin-main hidden-md hidden-lg"> 
 
    <span class="ham"></span> 
 
    </a> 
 

 

 
    <nav> 
 
    <ul class="menu" id="menu-main-nav-1"> 
 
     <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-631 current_page_item menu-item-645"><a href="http://www.estiponagroup.com/dev/">Home</a> 
 
     </li> 
 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646"><a href="http://www.estiponagroup.com/dev/our-work/">Our Work</a> 
 
     </li> 
 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-647"><a href="http://www.estiponagroup.com/dev/our-services/">Our Services</a> 
 
     </li> 
 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-648"><a href="http://www.estiponagroup.com/dev/our-team/">Our Team</a> 
 
     </li> 
 
     <!-- Other Nav links --> 
 
    </ul> 
 
    </nav> 
 
</div> 
 

 
.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li > a, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li > a { color: #ccc; text-transform: uppercase; } .main-header.menu-type-standard-menu 
 
.standard-menu-container.menu-skin-main div.menu > ul > li > a:hover, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li > a:hover { color: #ccc; text-transform: uppercase; text-decoration:underline; } .main-header.menu-type-standard-menu 
 
.standard-menu-container.menu-skin-main div.menu > ul > li.current_page_item > a, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li.current_page_item > a { color: #fff; } 
 

 

 
<div class="standard-menu-container menu-skin-main reveal-from-top"> 
 

 
    <a href="#" class="menu-bar menu-skin-main hidden-md hidden-lg"> 
 
    <span class="ham"></span> 
 
    </a> 
 

 

 
    <nav> 
 
    <ul class="menu" id="menu-main-nav-1"> 
 
     <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-631 current_page_item menu-item-645"><a href="http://www.estiponagroup.com/dev/">Home</a> 
 
     </li> 
 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646"><a href="http://www.estiponagroup.com/dev/our-work/">Our Work</a> 
 
     </li> 
 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-647"><a href="http://www.estiponagroup.com/dev/our-services/">Our Services</a> 
 
     </li> 
 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-648"><a href="http://www.estiponagroup.com/dev/our-team/">Our Team</a> 
 
     </li> 
 
     <!-- Other Nav links --> 
 
    </ul> 
 
    </nav> 
 
</div>

回答

0
li.menu-item.menu-item-type-post_type.menu-item-object-page.current-menu-item.page_item.page-item-631.current_page_item.menu-item-645 a{ 
    background-color: red; 
    color: white; 
} 

的問題是CSS的特殊性,如果你使用谷歌Chrome瀏覽器也有很多的標識符,所以你需要建立點,或作爲最後的選擇,使用!important