CSS階層クラスとID

Question

XHTML、CSS、jQuery を使用してメニューを作成していますが、CSS で問題が発生しました。ここ これは私のテストページであり、 ここ 私のCSSです。

私が問題を抱えているのは、.subMenu クラスが #menu のプロパティを継承しており、背景の色とサイズが同じであることです。.subMenu をクラスとして残して再利用できるソリューションを探しています。.subMenu を ID に変更することで機能するようになりました。奇妙なのは、.subMenu クラスを使用して jQuery コードの一部のプロパティを編集すると、それらのプロパティが変更されることです。

そこで、誰かがそれを修正する方法を教えてもらえないか、そしてそれが階層の問題であるかどうか、説明してもらえないかと考えていました。

ありがとう、レヴィ

Answer 1

問題は、 #menu > li a が li タグ内のすべてのリンクにそのスタイルを適用するため、サブメニュー内のすべての li タグにもこのスタイルが適用されることだと思います。唯一の違いはホバー時の背景色と前景色にあるように見えるので、 #menu > li a と #menu > li a:hover を #menu > li > a と #menu > に変更することで修正できますli > a: ホバーします。こうすることで、トップレベルのメニューのスタイルは、#menu 項目の直後にある li タグの直後にあるリンクにのみ適用されます。サブメニューのスタイルは同じままにすることができます。