使用子菜單時保持菜單按鈕的懸停狀態

我做了一個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; 
}

來源

2012-08-09 Brett

請您使用或製作jsfiddle的郵政編碼。下拉菜單必須是主菜單項的子元素才能使其工作。 – DanielB 2012-08-09 07:50:18

只需加上:) – Brett 2012-08-09 08:05:00

更換

#header .navWrapper .nav li a:hover,

與

#header .navWrapper .nav li:hover a,

這是因爲您的子菜單是li元素的子元素，而不是a標籤。

來源

2012-08-09 08:08:10 DanielB

您應該設置懸停狀態的背景圖像在父列表項上，而不是鏈接本身。

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

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

來源

2012-08-09 08:09:01 feeela

使用子菜單時保持菜單按鈕的懸停狀態

回答

相關問題