在子菜单页面上更改菜单项的颜色

我在使用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

在子菜单页面上更改菜单项的颜色

回答

相关问题