0

我正在为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 有关于图标和聚光灯等...）

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

最好的，

辛西娅

4

1 回答 1

0

你的选择器是错误的。

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

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

它的名称也很混乱

current-page-item

和

current_page_item

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

于 2013-01-17T23:25:55.380 回答