サイドバーのCSSが上部メニューのドロップダウンに影響を与えます

Question

私たちは、リストにある項目を持つ特定の右側のサイドバーをいくつかのページに作成しました。 （ "sexsidebar"）にクラスを割り当て、CSSコマンドを割り当てて、li要素がホバリングしたときの動作が違うようにしました。

ので、ここでサイドバーに何のためのHTMLコードのサンプルです：

<ul class="sexsidebar"> 
<li><a href="/firstURL">Rape</a></li> 
<li><a href="/secondURL">Indecent Assault</a></li> 
<li><a href="/thirdURL">Child Pornography</a></li> 
</ul> 

そしてCSS用：

ul.sexsidebar li 
    {background: #F5F5F5; 
     margin: 5px;} 

ul.sexsidebar li a 
    {display: block;} 

ul.sexsidebar li:hover, li:hover a 
    {background: #57AC68; 
     color: #FFFFFF !important;} 

これは、実際に働いていたが。しかし、いくつかの未知の理由により、それは私たちのページの "すべて"の上位メニュー（またli）のドロップダウンの外観に影響を与えました。私はサイドバーに特定のクラスが割り当てられてから実際には得られません（ul class="sexsidebar"）。当然それを指すCSSコマンドは、そのクラスだけに影響するはずです。しかし、なぜ上位メニューのドロップダウンが影響を受けますか？

サンプルページhereを表示できます。私はしかし、サイドバーのためのCSSコマンド（性的犯罪のリストを持つ部分）を削除しました。彼らは上部メニューのドロップダウンを台無しにしているからです。ページの上部には緑色の背景が表示され、ドロップダウンにはメニューの一部が表示されます。

class="sexsidebar"へのCSSコマンドが上部メニューのドロップダウンに影響する理由を誰かが説明できることを願っています。フィードバックをいただければ幸いです。このセレクタの第二部分に

Answer 1

ルック：

li:hover a 選択

ul.sexsidebar li:hover, li:hover a 

、全ページのリスト項目で、すなわちすべてのリンク。これに

変更を：

ul.sexsidebar li:hover, ul.sexsidebar li:hover a