css - Bootstrap 下拉菜单背景样式难度

Question

我想删除悬停时下 zipper 接上出现的灰色背景色并单击它。当您将鼠标悬停在其下拉菜单项上时，它也会出现在下 zipper 接上。请查看我在我的 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

看来您正在为错误的选择器更新背景颜色。

更改鼠标悬停和聚焦时下 zipper 接的背景颜色

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

要从下拉列表中删除灰色阴影，请从 .dropdown-menu 中删除最后两行。

-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;
}

希望对您有所帮助。如果还有任何问题，请卷土重来。!