css - 未应用 li.current-menu-item 的 Wordpress 菜单类

Question

我正在为 http://digitaldemo.net/vintage/about/ 的客户创建一个 Wordpress 站点我是快完成了。我遇到的唯一问题是，当我在给定页面上时，没有应用 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 有博客图标和聚光灯，li.about 有关于图标和聚光灯等...)

如果有人能帮我解决这个问题，我将不胜感激。

最好的，

辛西娅

Answer 1

您的选择器是错误的。

要选择带有 current-menu-item 类的 LI，您需要不带空格:

li.about.current-menu-item { ... }

名字也很困惑

current-page-item 

和

current_page_item

为了你自己的利益改变这些。