影响 CSS / HTML 中父元素的背景图像？

Question

我正在尝试用 HTML / CSS 构建一个向下滚动菜单，但遇到了一个恼人的问题...... 我使用以下教程来构建我的菜单： http: //ago.tanfa.co.uk/css/examples/menu/tutorial-h.html#hs7

我的问题： 鼠标悬停时，导航按钮的背景图像会发生变化，并且会出现下拉菜单 - 到目前为止，一切都很好 - 但是当您将指针移至下拉菜单时，导航按钮的图像将返回到其第一个状态。不过，我试图保持相同的图像，因此下拉菜单看起来像属于导航按钮（因为事实上，它确实......）

上的样子：

    <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>

以下是代码在HTML 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/

Answer 2

我敢打赌：您正在更改包含子菜单的链接的图像。当您将鼠标移到子菜单上时，您不再位于 上，我认为您应该更改 元素的高度以适应显示时的子菜单之一。如果您将背景图像提供给

而不是我猜的，效果会更好。