CSSのプルダウンメニュー
menu1とmenu2の挙動について疑問があります。
添付画像をご覧ください。
menu2からsub4-1を選択している状態です。
この時、menu2の背景色が赤に戻らないのは仕様でしょうか？
それとも何か間違っているのでしょうか？
背景を画像にしても同じ結果になります。
--------------------------------------------
ul#menu li{
float:left;
list-style-type:none;
text-align:center;
}
ul#menu ul li{
clear:both;
}
ul#menu li a,.menu1,.menu2{
display:block;
width:200px;
height:50px;
line-height:50px;
text-decoration:none;
background:#ff0000;
}
ul#menu li a:hover,.menu1:hover,.menu2:hover{
background:#ffcc00;
}
ul#menu ul{
display:none;
}
ul#menu li:hover > ul{
display:block;
position:absolute;
}
ul#menu ul ul{
margin:-50px 0 0 200px;
}
---------------------
<ul id="menu">
<li class="menu1">menu1</a>
<ul>
<li><a href="#">sub1</a>
<ul>
<li><a href="#">sub1-1</a></li>
<li><a href="#">sub1-2</a></li>
</ul>
</li>
<li><a href="#">sub2</a></li>
</ul>
</li>
<li class="menu2">menu2</a>
<ul>
<li><a href="#">sub3</a></li>
<li><a href="#">sub4</a>
<ul>
<li><a href="#">sub4-1</a></li>
<li><a href="#">sub4-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
------------------
お分かりになる方よろしくお願いします。
補足
該当部分は参考に出来ない状態になってると思うのですが…