更改为引导下拉菜单透明背景颜色

Question

我是一个新手，但我觉得我在这方面一直在碰壁太久了，希望能得到任何帮助。

我有一个看起来相当基本的导航栏，我正在尝试设置它的样式。我试图简单地将.dropdown-menu 的一种背景颜色更改为像导航栏的其余部分一样透明。似乎无论我尝试什么，我都无法覆盖它。不确定这是否是相关信息，但以防万一，我在 Rails 环境中进行所有这些样式设置。

application.html.erb

  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
      <li class="hidden">
        <a class="page-scroll" href="#page-top"></a>
      </li>
      <li>
        <a class="page-scroll" href="#about">About</a>
      </li>
      <li>
        <a class="page-scroll" href="#rules">Rules</a>
      </li>
      <li>
        <a class="page-scroll" href="#where">Where We Play</a>
      </li>
      <li>
        <a href="#">Blog</a>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Members<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <% if current_user %> <!-- facebook login -->
            <li><%= link_to current_user.name, members_profile_path %></li>
            <li><%= link_to "Sign Out", sign_out_path, method: :delete %></li>
          <% else %>
            <li><%= link_to "auth/facebook" do %><%= "Sign In" %><% end %></li>
          <% end %>
        </ul>
      </li>
    </ul>
  </div>

到目前为止，这就是我对导航栏所做的所有样式。

application.scss

nav {
  font-family: 'Special Elite', cursive;
  position: relative;
  padding: 30px 0px 0px 180px;
  color: white;
}

nav.navbar-default {
  background: -webkit-linear-gradient(black, transparent 100%), transparent;
  border-color: transparent;
}

  // Bootstrap overrides
  .nav.navbar-nav.navbar-right li a {
    color: #fff;
    background-color: transparent;
  }

这是我得到的结果。同样，这里的目标是让.dropdown-menu 的背景与导航栏的其余部分一样，并使文本为白色。

Answer 1

您应该为 .dropdown-menu 应用透明背景。

.dropdown-menu {
    background-color: transparent;
}

如果它不起作用，请尝试使用 `!important' 来检查特异性，然后你可以使选择器更深一些来解决这个问题。例如。

.dropdown .dropdown-menu {
    background-color: transparent;
}

我不建议使用!important，除非您无法解决特异性问题。希望有帮助。