ブートストラップのドロップダウンが間違ってハイライトされている

Question

矢印がどこを指しているかを見ると、ドロップダウンが開いたときに「強調表示」されない非常に小さなスライバーが表示されます。私は以前これを見たことがないし、原因を突き止める手がかりもなく、なぜそれが起こるのかを説明しながら誰かが修正を提供できるかどうかは素晴らしいだろう。ここにはJSFiddleがあります。

ナビゲーションバーコード

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       @if(!Auth::check()) 
        <li><a href="login"><img class="navbar-avatar" src="{{ asset('src/img/login_steam.png') }}"></a></li> 
       @else 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span>{{ Auth::user()->username }}</span><img class="navbar-avatar" src="{{ Auth::user()->avatar }}"></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Dashboard</a></li> 
          <li><a href="#">Settings</a></li> 
          <li><a href="#">Logout</a></li> 
         </ul> 
        </li> 
       @endif 
      </ul> 
     </div> 
    </div> 
</nav> 

CSS

.navbar { 
    margin-bottom: 0; 
    height: 70px; 
} 
.navbar-default { 
    background-color: #383838; 
    border-color: #383838; 
} 
/* title */ 
.navbar-default .navbar-brand { 
    color: #777; 
} 
.navbar-default .navbar-brand:hover, 
.navbar-default .navbar-brand:focus { 
    color: #5E5E5E; 
} 
/* link */ 
.navbar-default .navbar-nav > li > a { 
    color: #8D8D8D; 
    font-family: Open Sans; 
    font-size: 14px; 
} 
.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { 
    color: #8D8D8D; 
} 
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
    color: #6C6C6C; 
} 
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus { 
    color: #6C6C6C; 
    background-color: #2E2E2E; 
} 

.navbar-avatar { 
    width: 45px; 
    height: 45px; 
    position: relative; 
    float: right; 
    top: -4px; 
    margin-left: 8px; 
    margin-right: 8px; 
} 

.navbar-user { 
    padding: 0; 
    margin: 0; 
    display: inline-block; 
    padding-top:7px; 
} 

.navbar-steam { 
    position: relative; 
    float: right; 
    top: 8.6px; 
    margin-right: 8px; 
} 

.navbar-nav > li > a { 
    padding-top: 15px; 
    padding-bottom: 25px; 
} 

Answer 1

ここで更新フィドルです：

https://jsfiddle.net/tobyl/Laaej9ya/

私が作った唯一の変化でした：

.navbar { 
    margin-bottom: 0; 
    height: 68px; 
} 

.navbarの高さとドロップダウンの位置を制御する要素の高さがわずかに異なっていました。

Answer 2

だけ.dropdown-toggleにナビゲーションバーの高さを与えるので、あなたのコードによると、あなたが追加する必要があります

.dropdown-toggle { 
    height: 70px; /*cause 70px is the height of the navbar*/ 
}