（CSS）菜单周围的奇怪白色边框不是边框答案

【问题标题】：(CSS) Strange white border around menu that isn't a border（CSS）菜单周围的奇怪白色边框不是边框
【发布时间】：2017-11-02 13:04:00
【问题描述】：

我刚刚创建了我的第一个多级下拉菜单，但是有两个白色边框存在一些问题。第一个白色边框位于菜单底部，似乎与 a 元素的填充有关。我在下面的脚本中标记了该位置。

第二个白色边框围绕着带有语言的下拉菜单。我已经尝试了很多不同的替代方案，但到目前为止还没有找到任何解决这些问题的方法。

这里你可以看到菜单：

#menu-1 {
  position: fixed;
  width: 100%;
  z-index: 999;
  top: 0;
  left: 0;
  box-shadow: 0px 3px 8px -2px rgba(0, 0, 0, 0.4);
}

#menu-1 .top-border {
  background-color: rgb(255, 255, 255);
  padding-top: 1px;
}

#menu-1 .top-border .logo {
  padding: 12px 15px;
  width: auto;
  height: 62px;
  opacity: 0.8;
}

#menu-1 .top-border .contact-info {
  float: right;
  margin-top: 25px;
  margin-right: 12px;
}

.main-navigation {
  width: 100%;
  background-image: url(https://www.translation-services-usa.com/images/quote-admin/main_menu_background.gif);
  background-repeat: repeat-x;
  min-height: 35px;
  padding-bottom: 0;
  height: auto;
}

.menu-item {
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  font-weight: bolder;
}

.main-navigation a {
  font-size: 9.5px;
  letter-spacing: .0625em;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  color: white;
  /* Padding below creates the white border */
  padding: 12px 16px;
  text-decoration: none;
  border-left: 1px solid #146;
  border-right: 1px solid #024;
}

.sub-menu-item a {
  font-size: 11px;
  padding: 10px 13px 10px 13px;
}

.right-arrow {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-left-color: transparent;
  border-style: solid;
  border-width: 4px 0 4px 4px;
  border-left-color: #cccccc;
  position: absolute;
  right: 10px;
  top: 13px;
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  display: block;
  position: relative;
  float: left;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

ul li a:hover {
  background: transparent;
  color: #fff;
  background-color: rgba(0, 0, 0, .25);
}

li:hover>ul {
  display: block;
  position: absolute;
  background-color: #035;
}

li:hover li {
  float: none;
}

.sub-menu-1 a {
  color: #eee;
  border-bottom: 1px solid #041e37;
  border-left: 1px solid #002244;
  border-right: 1px solid #002244;
}

.menu-item-2 {
  font-size: 11px!important;
  border-left: none!important;
  border-right: none!important;
  padding-top: 11px!important;
}

.main-navigation li ul li {
  border-top: 0;
}

ul ul ul {
  left: 100%;
  top: 0;
}

ul:before,
ul:after {
  content: " ";
  display: table;
}

ul:after {
  clear: both;
}

<div id="menu-1">

  <div class="top-border">
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png" class="logo" alt="Scandinavia">


    <div class="contact-info">
      <img src="http://pluspng.com/img-png/iso-png-iso-png-1000.png" style="height: 37px; width: auto; padding-right: 10px;" alt="Scandinavia">
      <img src="http://pluspng.com/img-png/iso-png-iso-png-1000.png" style="height: 37px; width: auto; padding-right: 8px;" alt="Scandinavia">
      <img src="http://pluspng.com/img-png/iso-png-iso-png-1000.png" style="height: 39px; width: auto;" alt="Scandinavia">
    </div>

  </div>

  <ul class="main-navigation">
    <li><a href="#" class="menu-item">ITEM</a></li>
    <li><a href="#" class="menu-item">ITEM <i class="fa fa-caret-down"></i></a>
      <ul class="sub-menu-1">
        <li class="sub-menu-item">
          <!-- Dubbel dropdown -->
          <a href="#">TEXT <i class="right-arrow"></i></a>
          <ul>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
          </ul>
        </li>
        <li class="sub-menu-item">
          <!-- Dubbel dropdown -->
          <a href="#">TEXT<i class="right-arrow"></i></a>
          <ul>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
          </ul>
        </li>
        <li class="sub-menu-item">
          <!-- Dubbel dropdown -->
          <a href="#">TEXT<i class="right-arrow"></i></a>
          <ul>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
          </ul>
        </li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
      </ul>
    </li>

    <li><a href="#" class="menu-item">ITEM <i class="fa fa-caret-down"></i></a>
      <ul class="sub-menu-1">
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
      </ul>
    </li>

    <li><a href="#" class="menu-item">ITEM <i class="fa fa-caret-down"></i></a>
      <ul class="sub-menu-1">
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
      </ul>
    </li>



    <li><a href="#" class="menu-item">ITEM <i class="fa fa-caret-down"></i></a>
      <ul class="sub-menu-1">
        <li class="sub-menu-item">
          <!-- Dubbel dropdown -->
          <a href="#">TEXT <i class="right-arrow"></i></a>
          <ul>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
          </ul>
        </li>
        <li class="sub-menu-item">
          <!-- Dubbel dropdown -->
          <a href="#">TEXT <i class="right-arrow"></i></a>
          <ul>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
          </ul>
        </li>
        <li class="sub-menu-item">
          <!-- Dubbel dropdown -->
          <a href="#">TEXT <i class="right-arrow"></i></a>
          <ul>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
          </ul>
        </li>
        <li class="sub-menu-item">
          <!-- Dubbel dropdown -->
          <a href="#">TEXT<i class="right-arrow"></i></a>
          <ul>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
          </ul>
        </li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
      </ul>
    </li>



    <li><a href="#" class="menu-item">ITEM <i class="fa fa-caret-down"></i></a>
      <ul class="sub-menu-1">
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item">
          <!-- Dubbel dropdown -->
          <a href="#">TEXT <i class="right-arrow"></i></a>
          <ul>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
          </ul>
        </li>
        <li class="sub-menu-item">
          <!-- Dubbel dropdown -->
          <a href="#">TEXT<i class="right-arrow"></i></a>
          <ul>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
            <li><a href="#">TEXT</a></li>
          </ul>
        </li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
        <li class="sub-menu-item"><a href="#">TEXT</a></li>
      </ul>
    </li>

    <li><a href="#" class="menu-item" style="border-right: none;">ITEM</a></li>




    <!-- <img src="images/eng.png" /> -->


    <li style="float: right;">


      <a href="#" class="menu-item-2"><img src="https://www.translation-services-usa.com/images/main-menu-flag-en.png" style="margin-bottom: 0.5px; vertical-align: middle;" /> English</a>

      <ul class="sub-menu-1">
        <li class="sub-menu-item">
          <!-- Dubbel dropdown -->
          <a href="#"><img src="https://www.translation-services-usa.com/images/main-menu-flag-en.png" style="vertical-align: middle;" /> English</a>
          <a href="#"><img src="https://www.translation-services-usa.com/images/main-menu-flag-en.png" style="vertical-align: middle;" /> English</a>
          <a href="#"><img src="https://www.translation-services-usa.com/images/main-menu-flag-en.png" style="vertical-align: middle;" /> English</a>
          <a href="#"><img src="https://www.translation-services-usa.com/images/main-menu-flag-en.png" style="vertical-align: middle;" /> English</a>
        </li>
      </ul>

    </li>
  </ul>
</div>

关于解决方案的任何想法？我真的很感激。

【问题讨论】：

remove box-shadow: 0px 3px 8px -2px rgba 来自menu-1

标签： html css menu

【解决方案1】：

white border 外部菜单来自box-shadow 所以删除它

#menu-1 {
  position: fixed;
  width: 100%;
  z-index: 999;
  top: 0;
  left: 0;
  box-shadow: 0px 3px 8px -2px rgba(0, 0, 0, 0.4); //remove box-shadow
}

【讨论】：

是的，我知道，但它只是隐藏了问题，并没有解决问题。如果您查看右侧的语言菜单，白色边框仍然存在。
但我没有在language menu看到任何白色边框