从bootstrap 3 navbar-inverse下拉菜单中删除白线

Question

我制作了一个尽可能干净的菜单，并设法摆脱了一些不必要的样式。然而，有一条小白线仍然存在，而我在CSS上的边界要求为0或者没有，试图让它消失。

可以在音乐图标上方和下拉图标下方的这些图片中看到：

仅在＆＃34;小屏幕模式＆＃34;并显示下拉菜单显示。

自定义导航栏CSS

.navbar {
background-color: transparent;
background: transparent;
border: 0;
}

.navbar li { 
 color: white;
 font-size: 14px;
}

.collapse {
border: 0;
}

#myNavbar {
  border: 0;
}

.navbar .dropdown-menu::after{
 border:0;
}

.navbar-header .navbar-collapse {
 border: 0;
}

.navbar.navbar-default {
  padding: 10px 0;
  background: rgba(0, 0, 0, .1);
  border: none;
}

.navbar.navbar-default .navbar-nav > li > a,
.navbar.navbar-default .navbar-brand {
  color: white;
}

.navbar.navbar-default .navbar-collapse {
  border: none;
  box-shadow: none;
}

菜单标记：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right pull-right">
        <li><a href="#"><span class="glyphicon glyphicon-music"></span> Music</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-tasks"></span> Web</a></li>
      </ul>
    </div>
  </div>
</nav>

这是fiddle（按计算机图标在自己的窗口中运行）：

我如何指出那个元素让他离开那里？

非常感谢您的帮助或指示！

Answer 1

实际上它是一个盒子阴影只是删除/覆盖它

.navbar-collapse#myNavbar {
    -webkit-box-shadow: none;
    box-shadow: none;
}

Answer 2

默认bootstrap css中box-shadow而非border类.navbar-collapse。你可以覆盖它。

.navbar-collapse#myNavbar {
    -webkit-box-shadow: none;
    box-shadow: none;
}

Answer 3

在你的CSS中使用这个类。

.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 0px 0 rgba(255,255,255,.1) !important;
box-shadow: inset 0 0px 0 rgba(255,255,255,.1) !important;}