html - CSSメニュー項目はホバーすると消えます

Question

http://jsfiddle.net/Lijo/vZgTP/に示すように、CSSを使用して実装されたメニューがあります。

子アイテム（製品I）にカーソルを合わせると、ほとんどの場合、図に示すように強調表示されません。代わりに、子アイテムが消えます。それを解決する方法は？CSSコードはjsFiddleで利用できます。これを解決するためにどのような変更を行う必要があるかを指定できると便利です。

子供に期待される行動

Answer 1

問題は、 の高さが の高さより<li class="has-sub">も小さい<ul>ことです。そのため、マウスを の上に移動すると、<li>のホバリングが停止し、 のホバリングが<li>開始され<ul>ます。

Answer 2

わかりました。Fiddleを確認してください。

/*added padding-bottom: 8px;*/
#cssmenu ul li.has-sub:hover > a{ background:#FF5500; border-color:#FF5500;  top:-1px; z-     index:999;  padding-bottom: 7px;} 

Answer 3

まだ適切な解決策を見つけていませんが、理由を見つけたと思います。マウスをサブメニューまでゆっくりと下に移動すると、カーソルが #cssmenu > li の上に移動しなくなったピクセルがいくつかあります。もちろん、これによりサブメニューが消えます。代わりにマウスをすばやく動かすと、ブラウザはサブメニューでマウスイベントを発生させます。

解決策は、#cssmenu > li からサブメニューへのシームレスな (またはギャップのない) 移行であるべきです。