不能樣式導航欄鏈接引導

Question

下面是HTML

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#homenavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="home.html" class="navbar-brand" style="padding-top: 0;margin-top: 0">Name</a> 
    </div> 
    <div class="collapse navbar-collapse" id="homenavbar"> 
     <ul class="nav navbar-nav pull-right hidden-xs hidden-sm" id="menu"> 
      <li><a href="#home">HOME</a></li> 
      <li><a href="#about">ABOUT</a></li> 
      <li><a href="#services">SERVICES</a></li> 
      <li><a href="#portfolio">PORTFOLIO</a></li> 
      <li><a href="#testimonial">TESTIMONIAL</a></li> 
      <li><a href="#contact">CONTACT</a></li> 
     </ul> 
    </div> 
</div> 
</nav>` 

這裏是CSS

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { 
border-bottom: 3px solid green; 
color: #009ddc; 
} 

但懸停和重點不working.I無法發現問題。任何人都請幫忙。

Answer 1

除了關閉</nav>標籤，您的代碼是正確的。我已將您的代碼複製並粘貼到JSFiddle，並且懸停工作正常。

Answer 2

#menu li > a:hover, #menu li:hover >a{ 
 
    color:red; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
<div class="container-fluid"> 
 
    
 
     <ul class="nav navbar-nav pull-right" id="menu"> 
 
      <li><a href="#home">HOME</a></li> 
 
      <li><a href="#about">ABOUT</a></li> 
 
      <li><a href="#services">SERVICES</a></li> 
 
      <li><a href="#portfolio">PORTFOLIO</a></li> 
 
      <li><a href="#testimonial">TESTIMONIAL</a></li> 
 
      <li><a href="#contact">CONTACT</a></li> 
 
     </ul> 
 
    </div> 
 
</div> 
 
</nav>

試試這個:)如果你不介意做 「活動類」 做與JavaScript