为什么我的背景色比设定的要深？

Question

https://codepen.io/SynergyOfLife/pen/rPVYQW。

我有一个带有下拉菜单的标头。 工作正常，但是在我的下拉菜单周围，我的背景颜色比主要li项目上标题的其余部分都要暗。

var $fixme   = $( '.fixme' );
var fixmeTop = $fixme.offset().top;
var $main    = $( 'main' );
var $win     = $( window );

$win.scroll( function () {

  var atSticky = $win.scrollTop() >= fixmeTop;
  
  $fixme.toggleClass( 'sticky', atSticky );
  $main.css( 'padding-top', atSticky ? fixmeTop + 5 : 0 );
  
} );

$(function () {
  $(document).scroll(function () {
    var $nav = $(".fixme");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

@import url(css/bootstrap.min.css);
@import url(css/font-awesome.min.css);

/*  Min CSS  */

.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

.span-width {
  width: 100%;
}

.align-right {
  float: right;
}

.sticky {
  position: fixed;
  top: 0;
  left: 0;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #181818;
  color: #dddddd;
  font-size: 14px;
}

.fixme {
  width: 100%;
}

.right {
  float: right;
  margin: 0 34px;
  padding: 0 15px;
}

a,
a:hover,
a:focus {
  font-size: 16px;
  outline: 0 solid transparent;
  text-decoration: none;
  transition-duration: 500ms;
}

ul,
ol {
  margin: 0;
}

ul li,
ol li {
  list-style: none;
}


/* Header Area CSS */

.header-area {
  width: 100%;
}

.header-area .top-header-area {
  height: 85px;
  padding-right: 70px;
  width: 100%;
}

.header-area .top-header-area .top-search-area form {
  position: relative;
  width: 255px;
}

.header-area .top-header-area .top-search-area form input {
  background-color: #1a1a1a;
  border: none;
  border-radius: 10px;
  color: #ababab;
  font-size: 12px;
  font-style: italic;
  height: 42px;
  padding: 0 20px;
  transition-duration: 500ms;
  width: 100%;
}

.header-area .top-header-area .top-search-area form button {
  background-color: transparent;
  color: #555555;
  cursor: pointer;
  height: 42px;
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
}

.header-area .top-header-area .top-search-area form button:hover {
  color: #20d8da;
}

.header-area .top-header-area .login-area a {
  border-radius: 10px;
  color: #555555;
  display: block;
  font-size: 14px;
  font-weight: 400;
  height: 42px;
  line-height: 42px;
  margin-left: 10px;
  text-align: center;
  transition: background-color color ease-in-out 400ms;
  width: 160px;
}

.header-area .top-header-area .login-area a:hover {
  background-color: black;
  color: #f06040;
}

.p {
  color: green;
  padding: 20px 0;
}


/*  NavBar CSS  */

.header-area .fixme #main-navigation {
  background-color: #181818e6;
  height: 70px;
  padding: 20px 110px 0 110px;
  width: auto;
}

.header-area .fixme #main-navigation li {
  background-color: #181818e6;
  position: relative;
}

.header-area .fixme #main-navigation>li {
  float: left;
  margin-right: 5px;
}

.header-area .fixme #main-navigation li a {
  color: #f06040;
  display: block;
  font-weight: 500;
  line-height: 1em;
  padding: .5em;
  text-decoration: none;
}

.header-area .fixme #main-navigation li a:hover {
  color: #20d8da;
}

.header-area .fixme ul.folder-child {
  height: 0;
  left: 0;
  margin-top: 15px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 100%;
  transition: all 200ms ease-in-out;
  visibility: hidden;
  width: 150px;
}

.header-area .fixme #main-navigation li:hover>ul.folder-child {
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  height: 100px;
  opacity: 1;
  visibility: visible;
}

.hidden-caret {
  visibility: hidden;
}

    <header class="header-area">
  <div class="top-header-area">
    <p style="float: left; font-size: 32px;">Logo Here</p>
    <div class="row h-100 align-items-center right">
      <div class="d-flex">
        <div class="d-flex">
          <div class="top-search-area">
            <form action="#" method="post">
              <input type="search" name="top-search" id="topSearch" placeholder="Search">
              <button type="submit" class="btn"><i class="fa fa-search"></i></button>
            </form>
          </div>
          <div class="login-area">
            <a href="#"><span>Login / Register</span> <i class="fa fa-lock" aria-hidden="true"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="fixme">
    <ul id="main-navigation">
      <li><a href="#">Fill <i class="fa fa-caret-down hidden-caret"></i></a></li>
      <li>
        <a href="#">In <i class="fa fa-caret-down"></i></a>
        <ul class="folder-child">
          <li><a href="">a</a></li>
          <li><a href="">b</a></li>
          <li><a href="">c</a></li>
        </ul>
      </li>
      <li><a href="#">This <i class="fa fa-caret-down hidden-caret"></i></a>
      </li>
      <li>
        <a href="#">Here! <i class="fa fa-caret-down"></i></a>
        <ul class="folder-child">
          <li><a href="">d</a></li>
          <li><a href="">e</a></li>
          <li><a href="">f</a></li>
        </ul>
      </li>
      <li><a href="#">Contact <i class="fa fa-caret-down hidden-caret"></i></a></li>
    </ul>
  </div>
</header>
<main>
<p class="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sollicitudin tempor id eu nisl nunc. Massa enim nec dui nunc mattis enim ut tellus. Diam maecenas ultricies mi eget mauris pharetra et ultrices.
  <br>
<p class="p">Nulla aliquet porttitor lacus luctus. Tristique et egestas quis ipsum. Gravida rutrum quisque non tellus orci ac auctor. Nisl suscipit adipiscing bibendum est ultricies. Vulputate odio ut enim blandit. Blandit volutpat maecenas volutpat blandit aliquam. Purus in mollis nunc sed id semper risus.</p>
<br>
<br>
<br>
<br>
<p>Nulla aliquet porttitor lacus luctus. Tristique et egestas quis ipsum. Gravida rutrum quisque non tellus orci ac auctor. Nisl suscipit adipiscing bibendum est ultricies. Vulputate odio ut enim blandit. Blandit volutpat maecenas volutpat blandit aliquam. Purus in mollis nunc sed id semper risus.</p>
<br>
<br>
<br>
<br>
<br>
<p>Nulla aliquet porttitor lacus luctus. Tristique et egestas quis ipsum. Gravida rutrum quisque non tellus orci ac auctor. Nisl suscipit adipiscing bibendum est ultricies. Vulputate odio ut enim blandit. Blandit volutpat maecenas volutpat blandit aliquam. Purus in mollis nunc sed id semper risus.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>

我一步一步地删除了所有background-color选择器，但是我仍然得到奇怪的背景色。

我正在使用rgba，因此重叠的背景色可能会使它变暗。有什么建议吗？

Answer 1

删除此规则：

.header-area .fixme #main-navigation { /* and/or ... li */
    background-color: #181818e6;
}

如果要保留显式样式，请删除最后两个字符。它们本质上会改变灰色，并使前两个字符成为Alph通道（透明度）修饰符。