Html 悬停子菜单时是否保留主菜单的颜色？

我是HTML新手。我用css创建了一个简单的下拉菜单，但我有一个小问题，我希望当鼠标移动到子菜单时，主菜单保留其悬停颜色

这就是我所拥有的这就是我想要的

这是我的HTML

<div class="menu">
        <ul>
          <li><a href="home.html">Homepage</a></li>
          <li><a href="about.html" class="active">About us</a>
               <ul>
                    <li><a href="#">Link 1</a></li><br />
                    <li><a href="#">Link 2</a></li><br />
                    <li><a href="#">Link 3</a></li><br />
                    <li><a href="#">Link 4</a></li>
                </ul>
          </li>
          <li><a href="services.html"> Services</a>
                <ul>
                    <li><a href="#">Link 1</a></li><br />
                    <li><a href="#">Link 2</a></li><br />
                    <li><a href="#">Link 3</a></li><br />
                    <li><a href="#">Link 4</a></li>
                </ul>
          </li>
          <li><a href="contact.html">Contact us</a>
                <ul>
                    <li><a href="#">Link 1</a></li><br />
                    <li><a href="#">Link 2</a></li><br />
                    <li><a href="#">Link 3</a></li><br />
                    <li><a href="#">Link 4</a></li>
                </ul>
          </li>
          <li><a href="help.html">Help center</a>
                <ul>
                    <li><a href="#">Link 1</a></li><br />
                    <li><a href="#">Link 2</a></li><br />
                    <li><a href="#">Link 3</a></li><br />
                    <li><a href="#">Link 4</a></li>
                </ul>
          </li>
        </ul>
</div>

---

请告诉我如何实现这一点？

您可以保持

悬停

效果，将

：悬停

绑定到

li

尝试以下操作：

.menu ul li:hover > a {
    background: url('images/hover.png') repeat-x scroll center top transparent;
}

选中此项

.menu ul li:hover > a {
    background: url('images/hover.png') repeat-x scroll center top transparent;
}