Bootstrap Dropdown背景造型難度

Question

我想移除在懸停的下拉鍊接上發生的灰色背景色並單擊它。當您將鼠標懸停在其下拉菜單項上時，它也會出現在下拉菜單中。請參閱我在CSS中處理此問題的不成功嘗試（在代碼片段之後）。

$(document).ready(function() { 
 
    $('ul.nav > li > a.link').click(function(e) { /*create selector that selects against dropdown toggle, when */ 
 
    e.preventDefault(); 
 
    $('ul.nav > li > a').removeClass('active'); 
 
    $('.dropdown-menu > li > a').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    }); 
 

 
    $('ul.nav > li > a.dropdown-toggle').click(function(e) { 
 
    e.preventDefault(); 
 
    $('ul.nav > li > a').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    }); 
 

 
    $('.dropdown-menu > li > a').click(function(e) { 
 
    e.preventDefault(); 
 
    $('ul.nav > li > a').removeClass('active'); 
 
    $('.dropdown-menu > li > a').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    $('ul.nav > li > a.dropdown-toggle').addClass('active'); 
 
    }); 
 
});

@media only screen and (min-width: 767px) { 
 
    /* navbar */ 
 
    .navbar-default { 
 
    background-color: #FFFFFF; 
 
    border-bottom: 1px solid #777; 
 
    } 
 
    /* caret */ 
 
    .navbar-default .navbar-nav > .dropdown > a .caret { 
 
    border-top-color: #000000; 
 
    border-bottom-color: #000000; 
 
    } 
 
    .navbar-default .navbar-nav > li > a:before { 
 
    background-color: #000000; 
 
    content: ""; 
 
    height: 3px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    -moz-transform: scaleX(0); 
 
    -ms-transform: scaleX(0); 
 
    -webkit-transform: scaleX(0); 
 
    transform: scaleX(0); 
 
    -moz-transition: all 0.3s ease-in-out 0s; 
 
    -o-transition: all 0.3s ease-in-out 0s; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -webkit-transition-delay: 0s; 
 
    transition: all 0.3s ease-in-out 0s; 
 
    } 
 
    .navbar-default .navbar-nav > li > a:hover:before, 
 
    .navbar-default .navbar-nav > li > a:focus:before { 
 
    -moz-transform: scaleX(1); 
 
    -ms-transform: scaleX(1); 
 
    -webkit-transform: scaleX(1); 
 
    transform: scaleX(1); 
 
    } 
 
    .navbar-default .navbar-nav > li > a.active:before { 
 
    background-color: #ee3124; 
 
    -moz-transform: scaleX(1); 
 
    -ms-transform: scaleX(1); 
 
    -webkit-transform: scaleX(1); 
 
    transform: scaleX(1); 
 
    } 
 
    .navbar-default .navbar-nav .dropdown-menu> li > a { 
 
    color: #777; 
 
    font-weight: bold; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    -ms-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
    } 
 
    .navbar-default .navbar-nav .dropdown-menu> li > a:hover, 
 
    .navbar-default .navbar-nav .dropdown-menu> li > a:focus { 
 
    color: #000000; 
 
    } 
 
    .navbar-default .navbar-nav .dropdown-menu> li > a.active { 
 
    color: #ee3124; 
 
    } 
 
    /*visibility of submenu on dropdown during hover over dropdown*/ 
 
    .dropdown .dropdown-menu { 
 
    display: block; 
 
    opacity: 0; 
 
    -moz-transition: all 1000ms ease; 
 
    -webkit-transition: all 1000ms ease; 
 
    -o-transition: all 1000ms ease; 
 
    -ms-transition: all 1000ms ease; 
 
    transition: all 1000ms ease; 
 
    } 
 
    .dropdown:hover .dropdown-menu { 
 
    display: block; 
 
    opacity: 1; 
 
    } 
 
    /*background color of dropdown during nothng, hover, and open toggle*/ 
 
    .dropdown { 
 
    background-color: #ffffff; 
 
    -moz-transition: all 1000ms ease; 
 
    -webkit-transition: all 1000ms ease; 
 
    -o-transition: all 1000ms ease; 
 
    -ms-transition: all 1000ms ease; 
 
    transition: all 1000ms ease; 
 
    } 
 
    .dropdown:hover { 
 
    background-color: #e7e7e7; 
 
    } 
 
    .dropdown.open { 
 
    background-color: #ffffff; 
 
    } 
 
    /*links always remain bold no matter what, i.e. hover, focus, active,nothing*/ 
 
    .navbar-default .navbar-nav > li > a { 
 
    color: #777; 
 
    font-weight: bold; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    -ms-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
    } 
 
    .navbar-default .navbar-nav > li > a:hover, 
 
    .navbar-default .navbar-nav > li > a:focus { 
 
    color: #777; 
 
    font-weight: bold; 
 
    } 
 
    .navbar-default .navbar-nav > li > a.active { 
 
    color: #777; 
 
    font-weight: bold; 
 
    } 
 
    /* MY ATTEMPT AT CHANGING DROPDOWN BACKGROUND COLOR ON HOVER AND CLICK*/ 
 
    .dropdown-menu > li a:hover, 
 
    .dropdown-menu > li a:focus { 
 
    background-color: #ffffff; 
 
    background-image: none; 
 
    filter: none; 
 
    text-decoration: none; 
 
    border: none; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
</head> 
 

 
<body> 
 
    <nav class="navbar navbar-default" role="navigation"> 
 
    <div class="container"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <object type="image/svg+xml" data="okfb-logo.svg" width="70%" height="70%" id="logo"> 
 
      <img src="okfb-logo.png" /> 
 
      <!-- fallback with png image for browsers with NO SVG support --> 
 
     </object> 
 

 
     </div> 
 

 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 

 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#" class="link">Link</a> 
 
      </li> 
 
      <li><a href="#" class="link">Link</a> 
 
      </li> 
 
      <li><a href="#" class="link">Link</a> 
 
      </li> 
 
      <li><a href="#" class="link">Link</a> 
 
      </li> 
 
      <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li><a href="#">Action</a> 
 
       </li> 
 
       <li><a href="#">Another action</a> 
 
       </li> 
 
       <li><a href="#">Something else here</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</body> 
 

 
</html>

/* MY ATTEMPT AT CHANGING DROPDOWN BACKGROUND COLOR ON HOVER AND CLICK*/ 
.dropdown-menu > li a:hover, .dropdown-menu > li a:focus { 
    background-color: #ffffff; 
    background-image: none; 
    filter: none; 
    text-decoration: none; 
    border: none; 
} 

Answer 1

似乎要更新的背景色爲錯誤的選擇。

更改下拉鍊接的背景顏色上懸停和焦點

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover 
{ 
color: #262626; 
text-decoration: none; 
background-color:transparent;/*or any color you want*/ 
} 

從下拉除去灰色陰影，從.dropdown菜單除去最後兩行。

-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); // 
box-shadow: 0 6px 12px rgba(0,0,0,.175); 

並更新它像這樣。

.dropdown-menu { 
position: absolute; 
top: 100%; 
left: 0; 
z-index: 1000; 
display: none; 
float: left; 
min-width: 160px; 
padding: 5px 0; 
margin: 2px 0 0; 
font-size: 14px; 
text-align: left; 
list-style: none; 
background-color: #fff; 
-webkit-background-clip: padding-box; 
background-clip: padding-box; 
border: 1px solid #ccc; 
border: 1px solid rgba(0,0,0,.15); 
border-radius: 4px; 
} 

希望這可以幫助你。如果還有任何問題，請復出。