Question

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

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

请问我该如何做到这一点？

Answer 1

您可以将hover效果与:hover绑定到li试试这个：

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

选中 Demo Fiddle

在悬停子菜单时保留主菜单的颜色？

1 个答案: