:hoverで枠内どこに合わせても文字色が変わる

質問

画像のようなメニューを作りたいと思っています。

下記のように記述すると
<li>に:hoverをつけ、カーソルを合わせると<li>内の枠線下の部分と<li>内の背景色は変わりますが文字に関しては文字の上にカーソルを合わせないと文字色は変わりません。
<li>Yahoo!</li>、枠線内であれば文字が入っていない部分にカーソルを合わせても、枠線下の部分、背景色、文字色全て変える為にはどのように記述すればよいですか？

少し意味がわかりづらいかと思いますが、お分かりの方いらっしゃいましたら教えて下さい。
宜しくお願いいたします。

【HTML】
<nav>
<ul>
<li><a href="#">Yahoo!</a></li>
<li>……</li>
<li>……</li>
</ul>

【CSS】
nav ul li:hover{
background-color: yellow;
border-bottom: 5px;
}
nav ul li a:hover{
color:blue;
}

回答No.2

hok212

こんにちは。

発想を変えて、Aタグの幅と高さを親要素（この場合LI）に合わせて、Aタグに背景色を設定。hoverでAタグの背景色を変える方法があります。

### 一例
li a {
display:block;
width:100%;
height:100%;
background-color:#ff0;
color:#00f;
}
li a:hover {
background-color:#ccc;
color:#f00;
}

※Aタグをblock要素にして幅と高さを100%にすることで、親要素とサイズが一致します。

回答No.1

t_ohta

【CSS】
nav ul li:hover{
background-color: yellow;
border-bottom: 5px;
color:blue;
}