Zmiana koloru menu rozwijanego po kliknięciu i po najechaniu na niego

Moje menu rozwijane po kliknięciu zmienia kolor na navbar-default. Po najechaniu kursorem na elementy z menu rozwijanego wracają one również do koloru navbar-default.Zmiana koloru menu rozwijanego po kliknięciu i po najechaniu na niego

Oto obraz tego, co mam na myśli:

Tu jest mój HTML:

<div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Home</a></li> 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Cable</a></li> 
        <li><a href="#">DSl</a></li> 
        <li><a href="#">Wireless</a></li> 
        <li><a href="#">Business Cable</a></li> 
        <li><a href="#">Business DSL</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Phone</a></li> 
      <li><a href="#">Android TV</a></li> 
      <li><a href="#">Shaw Direct</a></li> 
      <li><a href="#">Careers</a></li> 
     </ul> 
    </div>

A oto mój CSS:

.navbar-default { 
    background-color: #00AEFE; 
} 
.navbar-default:visited { 
    background-color: #00AEFE; 
} 
ul.dropdown-menu { 
    background-color: #00AEFE; 
} 
ul.dropdown-menu:hover { 
    background-color: #00AEFE; 
}

Źródło

2016-12-30 Thomas Hutton

spróbuj dodać '' important' jak background-color: #! 00AEFE ważne; 'To powinno zmusić ten konkretny styl się najważniejszy. –

Możliwy duplikat [Zmień kolor paska nawigacyjnego na Twitterze Bootstrap 3] (http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3) – vanburen

Nie zadałeś pytania lub zawierał wystarczającą liczbę CSS do rozwiązywania problemów. Jeśli mówisz o kolorze, który widzisz podczas klikania elementu (gdy wciśnięte jest lewe naciśnięcie), jest to pseudoklaska ': active'. –

po prostu zrobić to z nadpisać klasa bootstrap

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover { 
    background-color: #00AEFE; 
} 
.nav > li > a:focus, .nav > li > a:hover { 
    background-color: #00AEFE; 
}

Sprawdź za pomocą kodu urywkowego, czego potrzebujesz? Uruchom fragment i zmienić go w trybie pełnoekranowym, a następnie sprawdzić

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<style> 
 
ul.dropdown-menu { 
 
    background-color: #00AEFE; 
 
} 
 
ul.dropdown-menu:hover { 
 
    background-color: #00AEFE; 
 
} 
 
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover { 
 
    background-color: #00AEFE; 
 
} 
 
.nav > li > a:focus, .nav > li > a:hover { 
 
    background-color: #00AEFE; 
 
} 
 

 
</style> 
 
<div class="collapse navbar-collapse navHeaderCollapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#">Home</a></li> 
 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Cable</a></li> 
 
        <li><a href="#">DSl</a></li> 
 
        <li><a href="#">Wireless</a></li> 
 
        <li><a href="#">Business Cable</a></li> 
 
        <li><a href="#">Business DSL</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Phone</a></li> 
 
      <li><a href="#">Android TV</a></li> 
 
      <li><a href="#">Shaw Direct</a></li> 
 
      <li><a href="#">Careers</a></li> 
 
     </ul> 
 
    </div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Źródło

2016-12-30 01:46:53

Zmiana koloru menu rozwijanego po kliknięciu i po najechaniu na niego

Odpowiedz

Powiązane problemy