Wordpress 在子菜单页面上更改菜单项的颜色
我正在Wordpress中使用Starkers主题构建一个站点。我已经使用html对主导航和子导航进行了编码,并使用css进行了样式设置。我需要做的是使每个主导航链接在其页面上更改颜色,并使子菜单的父菜单在其页面上使用不同的颜色。我试过使用当前菜单项和当前父项,但都不起作用。有什么想法吗 我的代码:Wordpress 在子菜单页面上更改菜单项的颜色,wordpress,Wordpress,我正在Wordpress中使用Starkers主题构建一个站点。我已经使用html对主导航和子导航进行了编码,并使用css进行了样式设置。我需要做的是使每个主导航链接在其页面上更改颜色,并使子菜单的父菜单在其页面上使用不同的颜色。我试过使用当前菜单项和当前父项,但都不起作用。有什么想法吗 我的代码: nav ul { list-style: none; font-size: 25px; font-family: 'HelveticaNeuel'; colo
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);
}
您将在活动页面和父页面的li标签上获得以下内容
- 当前菜单项
- 当前菜单祖先
- 当前菜单父项
- 当前页面\u父级
- 当前页面
#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;
}
我自己解决的。我需要使用body.page-id标签。谢谢,但没用。我不知道为什么当前的菜单等不起作用。