Webサイトで作業しているサイドバーのサブメニューにカーソルを合わせると、メニュー項目（.category）の色を変更できません。以下のjsFiddleの例でわかるように、ユーザーがカテゴリにカーソルを合わせるとサブメニューが開き、ユーザーがサブメニュー項目にカーソルを合わせるとホバーの色がオレンジ色になります。サブメニュー項目のホバーでそのオレンジ色を維持したいと思います。同時に、サブメニューが開いているときにメニュー項目（カテゴリ）の色を水色に変更したいと思います。
これを実現するためにcssだけを使用してみましたが、すべての子でホバーの色が変わります。これは私が望んでいることではありません。これは私が理解しようとしている継続的な問題であるため、これを解決するための助けをいただければ幸いです。
私がこれまでに試したこと：
$(this).find(".submenu").show().parent().css('color', 'lightblue');
jsfiddle：
問題は、リンクに優先度の高いデフォルトの青色が適用されていることです。色を変更するには、リンク上で実際に色を変更する必要があります。私はこれをhover()コードに入れました、そしてそれは働きました：
$(this).find("a").eq(0).css("color", "#2B60DE");
これにより、タグの最初の子リンクが検出されli.category（さらに子リンクは実際のメニュー項目です）、色が水色に変わります（＃2B60DE）。コードにmouseleave()同じコードを入れますが、次のように実際の値は空白のままにします。
$(this).find("a").eq(0).css("color", "");
最初の要素の色を変更しようとしましたが、jsfiddleでチェックインできます。
さらに、スタイルをクラスに適用し、javascriptを介してクラスを追加/削除する必要があります。
JQuery ソリューションではありませんが、親要素のスタイルを設定する方法については、この回答をご覧ください。
特に、あなたが探していることを行う2番目のjsfiddleサンプル（純粋なcss2）だと思います。