Navbar를 사용하는 부트 스트랩 맞춤 헤더

부울랩 navbar 클래스를 사용하여 내 웹 사이트에 대한 맞춤 헤더를 만들려고합니다. 링크 텍스트 색상을 흰색으로 변경하고 navbar 배경색을 검정색으로 변경하고 링크 강조 표시를 변경하고 싶습니다. 마우스가 그들을 넘어갈 때 색상. 여기Navbar를 사용하는 부트 스트랩 맞춤 헤더

<html> 
    <head> 
     <meta charset="UTF-8" /> 

     <!-- css files --> 
     <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/> 
     <link rel="stylesheet" type="text/css" href="main.css"> 

     <!-- javascript --> 
     <script src="jquery.js"></script> 
     <script src="bootstrap/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
     <!-- webiste header --> 
     <nav class="navbar navbar-default navbar-fixed-top header"> 
      <div class="container-fluid"> 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a href="#">link1</a></li> 
         <li><a href="#">link2</a></li>   
        </ul> 
       </div> 
      </div> 
     </nav> 
    <body> 
<html>

내 CSS입니다 :

.header{ 
    background-color:#333333; 
    color:red; 
    font-size:1.5em; 
} 


.header li{ 
    border-bottom:3px solid #333333; 
} 

.header li:hover{ 
    background-color:black; 
    border-bottom:3px solid orange; 
}

모든 것이 작동하는 것 같다가 있지만이 스크린 샷에서 볼 수있는 링크의 색이 회색이 아닌 흰색입니다

여기 내 HTML입니다. screenshot

출처

2016-07-28 Alex_Doe

.header a { 
    color: #fff; 
} 

.header a:hover { 
    color: #f00; 
}

출처

2016-07-28 16:55:46 3rdthemagical

Navbar를 사용하는 부트 스트랩 맞춤 헤더

답변

관련 문제