wordpressのlightningテーマにおいてグローバルメニューの各リストホバーのフォントカラーと背景色の変更が反映されないことについて

Question

実現したいこと

wordpressのligtningテーマを使用して、企業HPを作成したく思っております。
その上で、独自の特色を出したく、ヘッダーのグローバルメニューに対し
マウスホバー時にフォントカラーと背景色を変更したいのですが、
追加でCSSを入力(※以下記載)も反応しない状況です。

解決方法をご教示いただけますと幸いです。

• [ ]マウスホバー時にグローバルメニューの各リストのフォントカラーと背景色を変更させたい。

入力済みの追加CSSコード(太字の箇所が該当)

#site-header a{
background:#0000AA;
color:#ffffff;
}

**_.global-nav-list li a:hover {
background-color: #645635;
color: #000;
}_**


@media (min-width: 992px) {

/* アイコンの下にメニューの文字を配置する（スクロールしていないとき） */
body:not(.header_scrolled) .global-nav-list>li .global-nav-name {
display: flex;
flex-direction: column;
}

/* アイコンのスタイル（スクロールしていないとき） */
body:not(.header_scrolled) .global-nav-list>li .global-nav-name i {
font-size: 1.5em;
margin-right: 0;
margin-bottom: 0.5em;
color: var(--vk-color-primary);
}

/* 個々のメニュー枠のスタイル（スクロールしていないとき） */
body:not(.header_scrolled) .vk-menu-acc li {
width: 155px;
margin-left: -1px;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}

/* 最後のメニュー項目だけ白抜き文字にする */
.vk-menu-acc li:last-child {
background-color: var(--vk-color-primary);
}
body:not(.header_scrolled) .global-nav-list>li:last-child .global-nav-name i,
.global-nav-list>li:last-child .global-nav-name i {
color: #fff;
}
.nav li:last-child a, nav li:last-child a {
color: #fff;
}

body:not(.header_scrolled) .global-nav--layout--float-right {
align-items: unset;
}

.header_scrolled .global-nav--layout--float-right {
width: 100%;
}

.header_scrolled .global-nav-list {
display: block;
width: unset; /* 2022.5.31 Lightning 14.21 にアップデートしたときのスクロール時のレイアウトくずれの対策として追加 */
}

/* 最後のメニュー項目だけ右端に配置（スクロール時） */
.header_scrolled .vk-menu-acc li:last-child {
float: right;
}

/* 2023.3.5 追加 - デフォルトの width: 100vw のままだとヘッダー幅がコンテナ幅に一致しない */
.header_scrolled .site-header {
    width: 100%;
}


}

Comments

[Lhankor_Mhy]

このコードにはどういう意図がありますか？　書き間違えですか？

**_.global-nav-list li a:hover {
background-color: #645635;
color: #000;
}_**

[Lhankor_Mhy]

あ、わかりました。
太字にしようとしてMarkdownをお書きになって、反映されていないのですね。

[girlstalk]

Lhankor_Mhy様

失礼しました。
該当箇所を太字にしたく記入したつもりが
反映されていないようでしたねm(__)m

[girlstalk]

コメントありがとうございます。解決しました！本当に感謝いたします！！！

Answer 1

おそらくCSS詳細度の問題だと思いますので、とりあえずこのようにするとどうなりますか？

.global-nav-list li a:hover {
    background-color: #645635 !important;
    color: #000 !important;
}

これで上手くいったとしても『とりあえず』であって、本来あまり好ましい書き方ではないです。