hover時に色を変えたいのですが<span>部分だけ色が変わりません

Question

前提・実現したいこと

<li>を使用したナビゲーションを作成しています。 <li>部分をホバーすると背景色が変わる仕様で、あわせて文字色も白く変えたいです。

発生している問題・エラーメッセージ

<span>で囲んだ中の文字の中だけ白くなりません。どうしたらいいでしょうか？

該当のソースコード

<ul>
   <li><a href="index.html" title="TOP">TOP<span>トップ</span></a></li>
   <li><a href="concept/index.html" title="CONCEPT">CONCEPT<span>コンセプト</span></a></li>
   <li><a href="lineup/index.html" title="LINE UP">LINE UP<span>製品情報</span></a></li>
   <li><a href="contact/index.html" title="CONTACT">CONTACT<span>お問合せ</span></a></li>
</ul>

ul{
  width: 1050px;
  display: flex;
}

ul li a span{
	font-size:10px;
	display:block;
	text-align:center;
}

ul  li  a {
  width: 150px;
  box-sizing: border-box!important;
  display: block;
  color: #555;
  background: #fff;
  padding-top:15px;
  text-align:center;
  border-bottom:3px double #a6a6a6;
  border-right: 1px solid #a6a6a6;
  font-size: 14px;
  line-height:1.2em;
  font-weight:bold;
}
ul  li:hover  a  {
  color: #fff;
  background: #7e9ebf;
}

試したこと

ul li a span:hover{
	color:#FFF}

とやると、span部分のみホバーすると白くなります。

ul  li:hover  a  {
  color: #fff;
  background: #7e9ebf;
}

だけではspanは元の色のままでした。

補足情報（FW/ツールのバージョンなど）

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[TOTO_810]

kei344さん　すみません、囲みました。

Answer 1

ご提示のコードで、意図通りに<span>の部分もちゃんと色が変化しています。

CodePenで実装したもの

ということで、問題はここに書かれていないコードにあるものと思われます。

Comments

[TOTO_810]

maisumakunさん、さっそくのご回答ありがとうございます。見てみます！

[TOTO_810]

真っ先に回答してくださったのでmaisumakunさんをベストアンサーにいたします。
ありがとうございました。解決しました。

Answer 2

このコードだけであれば意図通りの動作をしてますので、多分ここに書かれていない部分のCSS等が影響しているんだと思います。

ChromeでHTMLを表示し、該当部分クリックからのコンテキストメニューで「検証」を選択して、該当部分のCSSに何が影響しているか調べてみてください。

予想ですが、別の場所でspanに対して背景色が設定されているんだと思います。
もしそちらを変更することが難しい場合は

ul li:hover a span{
    color:#FFF
}

等を入れて打ち消すしかないですね。

Comments

[TOTO_810]

45_Shingoさん、ご丁寧にありがとうございます！　ご指摘の通り、違うところに書いていたものが作用していました。すみません、ありがとうございました！