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 には about アイコンとスポットライトがあります)。

誰かがこの問題を解決するのを手伝ってくれるなら、本当に感謝しています。

一番、

シンシア

4

1 に答える 1

0

あなたのセレクターは間違っています。

クラスで LI を選択するcurrent-menu-itemには、スペースなしで LI を指定する必要があります。

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

また、名前でかなり紛らわしい

current-page-item

と

current_page_item

あなた自身の利益のためにこれらを変更してください。

于 2013-01-17T23:25:55.380 に答える