我正在为客户创建一个Wordpress站点,网址是http://digitaldemo.net/vintage/about/。我遇到的唯一问题是,当我在给定的页面上时,li.current-menu-item类没有被应用。
例如,在上面的URL上,关于菜单项应该有更深的灰色背景,而不是图标后面的白色“聚光灯”。
下面是我的导航的CSS:
/* Navigation */
.topnav {
width:960px ;
position:absolute ;
top:0 ;
left:0 ;
z-index:5000 ;
text-align:center ;
}
ul.menu {
margin-left:0 ;
padding-left:0 ;
list-style-type:none ;
}
.menu li {
display:inline-block ;
}
.menu li {
margin:0px 12px 12px 12px ;
height:130px ;
width:130px ;
}
.menu li a {
font-family:ParkLaneNF ;
color:#000000 ;
font-size:20px ;
font-weight:normal ;
text-align:center ;
text-decoration:none ;
text-shadow:1px 1px 3px #333333 ;
display:inline-block ;
line-height:130px ;
height:76px ;
width:130px ;
padding-top:54px ;
}
.menu li.home {
background:url("images/homepage-icon.png") no-repeat center ;
}
.menu li.home:hover, .menu li.home .current_page_item {
background:url("images/homepage-icon-over.png") no-repeat center ;
}
.menu li.blog {
background:url("images/blog-icon.png") no-repeat center ;
}
.menu li.blog:hover, .menu li.blog .current-menu-item {
background:url("images/blog-icon-over.png") no-repeat center ;
}
.menu li.store {
background:url("images/store-icon.png") no-repeat center ;
}
.menu li.store:hover, .menu li.store .current_page_item {
background:url("images/store-icon-over.png") no-repeat center ;
}
.menu li.about {
background:url("images/about-icon.png") no-repeat center ;
}
.menu li.about:hover, .menu li.about .current-page-item {
background:url("images/about-icon-over.png") no-repeat center ;
}
.menu li.contact {
background:url("images/contact-icon.png") no-repeat center ;
}
.menu li.contact:hover, .menu li.contact current-menu-item {
background:url("images/contact-icon-over.png") no-repeat center ;
}
每个li都有一个独特的背景图像(例如li.blog有blog图标和聚光灯,li.about有about图标和聚光灯,等等)
如果有人能帮我解决这个问题,我会非常感激的。
最好的,
辛西娅
你的选择器是错误的。
要使用类current-menu-item
选择您的LI,您需要使其不带空格:
li.about.current-menu-item { ... }
而且名字也让人摸不着头脑
current-page-item
而且
current_page_item
为了你好把这些换掉。