thay đổi bootstrap thanh menu thả xuống trình đơn hover màu

Question

Tôi cố gắng thay đổi màu di chuột của trình đơn thả xuống trong thanh điều hướng. nhưng tôi không thể. bất kỳ ai có thể giúp tôi. đây là html.how của tôi tôi thay đổi màu sắc di chuột bằng cách sử dụng css?

<div class="navbar navbar-inverse" id="menu"> 
    <div class="navbar-inner"> 
     <ul class="nav"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="projects.html">Projects</a></li> 
      <li class="dropdown active"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Service <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="registration.html">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Separated link</a></li> 
        <li class="divider"></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Gallery <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="registration.html">house Plan design</a></li> 
        <li><a href="#">Interior Design</a></li> 
        <li><a href="#">Gardning DEsign</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Separated link</a></li> 
        <li class="divider"></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="contact.html">Contact</a></li> 
     </ul> 
    </div> 
    </div> 

Answer 1

Hãy thử điều này:

Di background-image và sử dụng background-color

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { 
      background-image:none !important; 
} 
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { 
      background-color:red; 
} 

DEMO

Để thay đổi màu mũi tên sử dụng này:

<span class="caret" style="color: red;"></span> 

UPDATED DEMO

Answer 2

Bạn có thể muốn ghi đè CSS của khung như dưới đây.

.navbar dropdown li a:hover { 
    background-color: #b5b5b5; 
} 

Answer 3

Để thay đổi nền của trình đơn thả xuống, hãy thử này

nav.navbar ul li > ul { 
    background: #2B3E50; 
    box-shadow: none; 
} 

chỉ cần sử dụng kiểm tra nguyên tố của trình duyệt và bạn sẽ thấy toàn bộ cấu trúc của menu thả xuống và cách bootstrap thêm một số lớp. bạn có thể sử dụng điều đó để sửa đổi khuôn khổ theo nhu cầu của bạn.

Answer 4

Quy tắc mặc định css của bootstrap 3 đến Dropdowns nền hover là

.dropdown-menu>li>a:hover { 
    color: #262626; 
    text-decoration: none; 
    background-color: #f5f5f5; 
} //somewhat on line 6 or 7 

Để thay đổi mà bạn có thể muốn thêm quy tắc css tùy chỉnh của bạn và tôi khuyên bạn nên để thêm id hoặc class của riêng bạn để nhắm mục tiêu đến thả xuống thay vì ghi đè lên mặc định bằng cách sử dụng bộ chọn riêng của nó để các trình đơn thả xuống khác sẽ không bị ảnh hưởng.

.your-class>li>a:hover { 
    background-color: red !important; 
} 

Hy vọng điều đó sẽ hữu ích.