hover時に謎の色が混ざる現象について

Question

hoverでリンクの上をマウスオーバーした時に、下記の画像のように赤くなるところ、

マウスオーバーの箇所をずらした際に、謎の色が混ざる現象が起こります。

カスタムしたcssは以下のみです。

header.site-header {
	display: block !important;
}

.main-header.menu-type-standard-menu .standard-menu-container ul.menu>li>a span:hover {
	background-color: #e60012 !important;
	color: #fff !important;
}

.main-header.menu-type-standard-menu .standard-menu-container div.menu>ul>li>a, .main-header.menu-type-standard-menu .standard-menu-container ul.menu>li>a{
	font-size:14px !important;
	font-weight:bold !important;
	padding:20px 15px 20px 15px;
}

以下はカスタムして書き換えているcssです。

li.current-menu-item a span {
    background: #f7c016;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

上記のバックグラウンドカラー#f7c016が何らかの原因で前に出ていると予想していますが、
どのように修正すれば、#f7c016が出ないように調整できるでしょうか。

情報が何か足りない部分等ありましたら、お伝えください。

かなり曖昧なのですが、何卒よろしくお願いいたします。

Comments

[yoshinavi]

CSSコードのみでは判断しにくい場合が多々ありますので、症状が再現するHTMLコードとCSSコードを提示されると回答がつきやすくなるかと思います。

Answer 1

「カスタムしたcss」と
「カスタムして書き換えているcss」の違いが
よく分からないのですが

後者の current-menu-itemというのは
名前から「現在のページ」を指してると予想されます。

このスクリーンショットを撮るときに開いていたページは
「ABOUT」だったのではないでしょうか。

はっきりbackground: #f7c016;（黄色）と設定してるので
「謎の色」ではなく「通常時に表示される背景色」だと思います。

このページの「ABOUT」はマウスオーバーする前から
この黄色だったのではないでしょうか。

「HOME」ページなら「HOME」が、「CONTENT」なら「CONTENT」が
この黄色になるのではないでしょうか。

前者のCSS（:hover）で　マウスカーソルを重ねると赤に
カーソルを離すと元の黄色に戻ってるだけではないでしょうか。

もし　この黄色が不要でしたら
background: #f7c016;の行を削除（もしくは#ffffffなどに変更）すれば
解決すると思います。

Comments

[white1114]

返答が遅くなり、すみません。
場所は違いましたが、確認したところ、バックグラウンドに違う色が入っていることを確認しました。修正後目的の表示になりました。
ご回答ありがとうございました。