我正在使用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);
}
答案 0 :(得分:2)
您将在 li 标记的活动页面和父网页上获得以下课程。
根据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;
}
答案 1 :(得分:0)
自己解决了这个问题。我需要使用body.page-id标记。