在子菜單頁面上更改菜單項的顏色

我在使用Starkers主題的Wordpress中構建網站。我已經使用html來編寫主要和次要導航，並在CSS中進行了設計。我需要做的是讓每個主導航鏈接在其頁面上改變顏色，並使子菜單的父級在頁面上變成不同的顏色。我試過使用current-menu-item和current-parent-item，但都沒有工作。有任何想法嗎？？？ http://page12.com.au/sample.html 在子菜單頁面上更改菜單項的顏色

我的代碼：

nav ul { 
    list-style: none; 
    font-size: 25px; 
    font-family: 'HelveticaNeuel'; 
    color: rgb(146, 148, 151); 
    } 

nav ul li { 
    display: block; 
    float: left; 
    margin-top: 40px; 
    font-family: 'HelveticaNeuel'; 
    color: rgb(146, 148, 151); 
} 

/*position home, folio, contact */ 

nav ul li.right a { 
    margin-left: 600px; 
} 

nav ul li.left1 a { 
    margin-left: 20px; 
} 

nav ul li.center { 
    margin-left: 40px; 
} 

nav ul li a { 
    text-decoration: none; 
    font-family: 'HelveticaNeuel'; 
    color: rgb(146, 148, 151); 
} 

nav a:hover { 
    color: rgb(164, 130, 46); 
} 

nav ul li ul { 
    display: none; 
    font-size: 15px; 
    padding: 10px; 
    width: 800px; 
} 

nav ul li:hover ul { 
    display: block; 
    position: absolute; 
    /*left: 0;*/ 
} 

nav ul li ul li { 
    padding: 10px; 
} 

/* sub navigation */ 

#sub-nav { 
    width: 960px; 
    height: 35px; 
    text-align: right; 
    padding: 5px 0 0 0; 
    margin-bottom: 20px; 
    font-size: 16px; 
    height: 30px; 
} 

    #sub-nav li { 
     display: inline; 
     margin-left: 10px; 
     margin-right: 10px; 
     position: relative; 
     float: left; 
    } 

    #sub-nav a { 
     text-decoration: none; 
     font-family: 'HelveticaNeuel'; 
     color: rgb(146, 148, 151); 
    } 

    #sub-nav a:active { 
     color: rgb(164, 130, 46); 
    } 

    /*sub menu selected page font colour change */ 
    #sub-nav li.selected a { 
     color: rgb(164, 130, 46); 
    }

來源

2014-02-22 Vicki

您將獲得以下積極和父頁面上的類裏標籤。

當前菜單項
當前菜單 - 祖先
當前菜單父
current_page_parent
current_page_ancestor

根據ablove類，你可以給的CSS那。

#nav { 
    background:#333; 
    border-bottom:1px solid #000; 
} 
#nav ul { 
    float:left; 
    margin:0; 
} 
#nav ul > li { 
    float:left; 
    list-style:none; 
    position:relative; 
} 
#nav li > a { 
    color:#fff; 
    font-size:14px; 
    padding:10px 20px; 
    display:block; 
    text-transform:uppercase; 
} 
#nav li:hover > a , 
#nav li.current-menu-item > a, 
#nav li.current-menu-ancestor > a, 
#nav li.current_page_item > a, 
#nav li.current_page_ancestor > a, 
#nav li.current_page_parent > a { 
    background:#212121; 
    text-decoration:none; 
} 
#nav ul ul { 
    position:absolute; 
    top:36px; 
    left:0; 
    background:#fff; 
    border:1px solid #ccc; 
    border-top:none; 
    padding:7px 0; 
    display:none; 
} 
#nav ul ul ul { 
    left:100%; 
    top:0; 
} 
#nav li li { 
    width:160px; 
} 
#nav li li > a { 
    font-size:12px; 
    color:#7e7e7e; 
    padding:5px 20px; 
} 
#nav li li:hover > a , 
#nav li li.current-menu-item > a, 
#nav li li.current-menu-ancestor > a, 
#nav li li.current_page_item > a, 
#nav li li.current_page_ancestor > a, 
#nav li li.current_page_parent > a { 
    background:#fff; 
    color:#232323; 
} 
#nav li:hover ul { 
    display:block; 
}

來源

2014-02-22 05:54:21

謝謝，但沒有奏效。我不確定爲什麼當前菜單等不起作用。 – Vicki

自己試了一下。我需要使用body.page-id標記。

來源

2014-02-27 05:51:12 Vicki

在子菜單頁面上更改菜單項的顏色

回答

相關問題