css - 影响 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 中的“background-image:none”，这实际上影响了我代码中的整个 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/