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中的“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

我敢打赌：您正在更改包含子菜单的链接图像。当您将鼠标移到子菜单上时，您不再位于<a>上，我认为您应该更改<a>元素的高度，以便在显示子菜单时调整其中一个子菜单。如果您将背景图像提供给<li>而不是我猜想会更好。

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

2 个答案: