CSS/HTMLの親要素の背景画像に影響しますか？

Question

私は私が私のメニューを構築するには、次のチュートリアルを使用している ... HTML/CSSでメニューをスクロールダウン構築しようとしていると厄介な問題が発生しています：http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html#hs7

私の問題：マウスオーバーで 、私のナビゲーションボタンの背景画像が変更され、ドロップダウンメニューが表示されます.-これまでのところ良いですが、ドロップダウンメニューにポインタを移動すると、ナビゲーションボタンの画像は最初の状態に戻ります。私は同じイメージを維持しようとしているので、ドロップダウンメニューはナビゲーションボタンに属しているように見えます（実際にはそうです...）

コードはHTML ：

<ul id="nav_menu"><li id="nav_button"><a href="#">Products</a> 
     <ul> 
        <li id="submenu"><a href="#">Product 1</a></li> 
        <li id="submenu"><a href="#">Product 2</a></li> 
        <li id="submenu"><a href="#">Product 3</a></li> 
        <li id="submenu"><a href="#">Product 4</a></li> 
     </ul> 
    </li></ul> 

とCSSで：

#nav_button a { 
    display:block; 
    background-image:url(img1.jpg); 
    background-repeat:no-repeat; 
    } 


#nav_button a:hover { 
      display:block; 
    background-image:url(image2.jpg); 
    background-repeat:no-repeat; 
     } 

    #nav_button ul { 
     display:none; 
    } 


    #nav_menu li:hover ul { 
       display:block; 
       } 

     #submenu a { 
      background-image: none; 
     } 

私は問題があることを理解していない「背景画像：どれも」私の#submenu aの、実際に影響を与える私のコードでは、全体のA ... CSSには親セレクタがないので、残念ながらドロップダウンリストからナビゲーションボタンを変更することはできません。

あなたはそれを行う方法を知っていますか？答えはそれほど複雑ではないと思いますが、本当に助けてくれてありがとう！

ありがとうございます！ D.

Answer 1

これを試してみてください...

#nav_button a:hover, #nav_button:hover > a { 
    background-image: url(image2.jpg); 
    background-repeat: no-repeat; 
} 

代わりに...

#nav_button a:hover { 
    display: block; 
    background-image: url(image2.jpg); 
    background-repeat: no-repeat; 
} 

代わりに画像の色を使用してデモ：http://jsfiddle.net/wdm954/gwjmK/1/

Answer 2

私の賭け：あなたが変更していますサブメニューを含むリンクの画像。サブメニューの上にマウスを移動すると、<a>には表示されません。表示されているサブメニューの1つに適応するように、<a>要素の高さを変更する必要があります。私が推測するのではなく、<li>に背景イメージを与えると良いでしょう。