Question

我制作了一个CSS下拉菜单，当您将鼠标悬停在主菜单按钮上时，它会使用hover状态更改背景图片。

但是，如果此人导航到下面的下拉菜单选项，则他们当前处于主菜单按钮会自然失去它的悬停状态。我过去曾使用Javascript来更改类，因此它保留了相同的背景图像，但是想知道有没有办法在没有Javascript的情况下执行它？

HTML：

<div class="navWrapper">
        <div class="left"></div>
        <div class="nav">
            <ul>
                <li class="home"><a href="/">Home</a></li>
                <li class="spacer"></li>
                <li class="about">
                    <a href="about_us/">About Us</a>
                    <ul class="sub">
                        <li><a href="">option 1</a></li>
                    </ul>                        
                </li>
                <!-- About Ends -->
                <li class="spacer"></li>
                <li class="trademark"><a href="freetrademarksearch/">Free Trademark Search</a></li>
                <li class="spacer"></li>
                <li class="services">
                    <a href="services/">Services</a>
                    <ul class="sub">
                        <li><a href="">option 1</a></li>
                        <li><a href="">option 2</a></li>
                    </ul>
                    <!-- Sub Ends -->
                </li>
                <!-- Services Ends -->
                <li class="spacer"></li>
                <li class="testimonials"><a href="testimonials/">Testimonials</a></li>
                <li class="spacer"></li>
                <li class="more">
                    <a href="javascript:void(0);">More Information</a>
                    <ul class="sub">
                        <li><a href="">option 1</a></li>
                        <li><a href="">option 2</a></li>
                    </ul>
                    <!-- Sub Ends -->
                </li>
                <li class="spacer"></li>
                <li class="contact"><a href="contact-us/">Contact Us</a></li>                 
            </ul>
            <div class="contentClear"></div>
        </div>
        <!-- Nav Ends -->
        <div class="right"></div>
    </div>
    <!-- Nav Wrapper Ends -->

CSS：

#header .navWrapper {
    width: 1004px;
}

#header .navWrapper .left {
    float: left;
    width: 4px;
    min-width: 4px;
    height: 47px;
    min-height: 47px;
    background: url('../images/nav-left-bg.png') left top no-repeat;
}

#header .navWrapper .nav {
    float: left;
    width: 994px;
    border-top: 1px solid #e0d0b4;
    border-left: 1px solid #e0d0b4;
    border-right: 1px solid #e0d0b4;
    border-bottom: 1px solid #e8dcc8;
    background: url('../images/nav-button-bg.png') left top repeat-x;
}

#header .navWrapper .nav ul {
    margin: 0 1px;
    display: block;
}

#header .navWrapper .nav li {
    float: left;
    position: relative;
    display: block;
    height: 45px;
    font-family: OpenSansBold, Arial;
    font-size: 16px;
    line-height: 2.9;
    text-align: center;
    color: #646464;
}

#header .navWrapper .nav li.spacer {
    width: 2px;
    min-width: 2px;
    height: 45px;
    min-height: 45px;
    background: url('../images/nav-button-spacer-bg.png') left top no-repeat;
}

#header .navWrapper .nav li a,
#header .navWrapper .nav li a:visited
{
    display: block;
    height: 45px;
    padding: 0 20px;
    color: #646464;
    text-decoration: none;
}

#header .navWrapper .nav li a:hover,
#header .navWrapper .nav li a:active,
#header .navWrapper .nav li a:focus
{
    color: #fff;
    background: url('../images/nav-button-bg.png') left bottom repeat-x;
}

#header .navWrapper .nav li.home {
    max-width: 86px;
    text-indent: -1px;
}

#header .navWrapper .nav li ul.sub {
    position: absolute;
    display: none;
    left: -1px;
    top: 45px;
}

#header .navWrapper .nav li:hover > ul.sub {
    display: block;
}

#header .navWrapper .nav li ul.sub li {
    float: none;
    display: block;
    font-family: OpenSansSemibold, Arial;
    font-size: 14px;
    line-height: 2.3;
    height: auto;
    text-align: center;
    background-color: #f4771d;
    color: #fff;
    white-space: nowrap;
    text-align: left;    
}

#header .navWrapper .nav li ul.sub li a,
#header .navWrapper .nav li ul.sub li a
{
    color: #fff;
    height: auto;
}

#header .navWrapper .nav li ul.sub li a:hover,
#header .navWrapper .nav li ul.sub li a:focus,
#header .navWrapper .nav li ul.sub li a:active
{
    background: #d66627;
}

#header .navWrapper .right {
    float: right;
    width: 4px;
    min-width: 4px;
    height: 47px;
    min-height: 47px;    
    background: url('../images/nav-right-bg.png') left top no-repeat;
}

Answer 1

替换

#header .navWrapper .nav li a:hover,

与

#header .navWrapper .nav li:hover a,

这是因为您的子菜单是li元素的子项，而不是a标记。

Answer 2

您应该在父列表项上设置悬停状态的背景图像，而不是链接本身。

/* instead of your */
#header .navWrapper .nav li a:hover

/* try */
#header .navWrapper .nav li:hover a

使用子菜单时保持菜单按钮的悬停状态

2 个答案: