css - a:hover ドロップダウン メニューの問題

Question

2 つの列を持つドロップダウン メニューがあり、ホバーするとドロップダウンであるブロック内のリンクの色が変わりますが、スタイルを追加すると、トップ レベルのul要素のみが機能し、ブロック全体がアクティブになります。私はこのことをあまりにも長く見てきa:hoverましたli.

メインリンクにホバー効果がなく、ドロップダウンレベルに効果があるように、どこに配置する必要があるか考えていますか?

全画面表示

jsFiffle

Answer 1

これで動作します：

#top_nav li:hover > a { ... }

そのため、ホバーされた LI 要素内のアンカーのみが「アクティブになります」。「プロジェクト」の最上位メニュー項目にカーソルを合わせると、アンカーの色が変わりますが、ドロップダウン メニューのアンカーは変わりません。次に、そのドロップダウン メニューのアンカーの 1 つにカーソルを合わせると、それを含む LI 要素にカーソルが合わせられているため、色が変わります。