悬停子菜单时保留主菜单的颜色? [英] Retain color of main-menu when hovering sub-menu?

问题描述

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

I am new to HTML. I created a simple dropdown with css but I have a little problem, I want the main-menu to retain its hover color when the mouse is taken to the sub-menu.

这就是我所拥有的              nbsp; bsp   这就是我想要的

This is what I have                                                 This is what I want

这是我的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>

这是我的css

.menu 
{
    float: left;
    padding: 2px 0px 0px;
    margin: 0px;
    width: 500px;
}
.menu ul 
{
    text-align: right;
    padding: 0px;
    margin: 0px;
    list-style: none outside none;
    border: 0px none;
}
.menu ul li 
{
    text-align: left;
    float: left;
    margin: 0px;
    padding: 0px;
    border: 0px none;
}
.menu ul li a.active {
    background: url('images/hover.png') repeat-x scroll center top transparent;
}
.menu ul li a:hover {
    background: url('images/hover.png') repeat-x scroll center top transparent;
}
.menu ul li a {
    float: left;
    margin: 0px;
    border-right: 1px solid #464646;
    padding: 13px 10px 11px;
    color: #FFFEFE;
    font: 14px Arial,Helvetica,sans-serif;
    text-decoration: none;
}
.menu ul li ul
{
    list-style-type: none;
     display: none;
     position: absolute;
    margin-top: 41px;
}
.menu ul li ul li
{
    border: 0;
    width: 200px;
    position: relative;
}
.menu ul li:hover ul
{
    display: block;
    position: absolute;
    background-color: black;
}
.menu ul li:hover ul a
{
    color: white;
    border: 0;
    width: 180px;
}
.menu ul li ul li a:hover
{
    background: none;
    background-color: white;
    color: navy;
}

请问我该如何实现?

推荐答案

您可以保持hover效果，将:hover绑定到li，请尝试以下操作:

You can keep the hover effect binding the :hover to the li try this:

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

选中此 演示小提琴

Check this Demo Fiddle

这篇关于悬停子菜单时保留主菜单的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！