Affect the background image of a parent element in CSS / HTML?

I'm trying to build a scroll down menu in HTML / CSS and am experiencing an annoying problem... I have used the following tutorial to build my menu: http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html#hs7

My problem: On mouseover, my navigation button's background image changes, and the drop down menu appears - so far, so good - but when you move the pointer to the dropdown menu, the navigation button's image goes back to its first status. I'm trying to keep teh same image though, so the drop down menu would look as it belonged to the navigation button (since, in fact, it does...)

Here's how the code looks like on the 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>

And in the 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;
        }

I understand that the problem is the "background-image:none" in my #submenu a, which in fact impacts the whole a in my code... Since there's no parent selector in CSS; I can't really modify the navigation button from the drop down list, unfortunately.

Do you know a way to do it? I guess the answer is not that complicated, but I'd really appreciate some help!

Thanks in advance! D.

---

Try this...

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

instead of...

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

Demo using colors instead of images: http://jsfiddle.net/wdm954/gwjmK/1/

---

My bet: you are changing the image of a link which contains a submenu. When you move the mouse over the submenu, you are not longer on the <a>, I think you should change the height of the <a> element to adapt the one of the submenu when it's displayed. Would be better if you give the background image to the <li> instead of the I guess.