ブートストラップナビは、リンク上をホバリングしたときに下のコンテンツをプッシュします

Question

私はいくつかの同様の問題を発見しましたが、私には解決策が見つかりませんでした。だからそれに下ることができます。私は自分の問題を紹介する短い10秒のクリップを記録しました。それをHEREで見てください。このBootplyもご覧ください。ありがとう、私はちょうどこれの周りに私の心を包むことはできません。境界線が適用さ HTML

<div class="container"> 
    <nav class="navbar navbar-default" role="navigation"> 
     <div class="row"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> 
        <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="navbar"> 
       <ul class="nav navbar-nav"> 
        <li><a href="">Women</a></li> 
        <li><a href="">Men</a></li> 
        <li><a href="">Junior</a></li> 
        <li><a href="">Accesories</a></li> 
        <li><a href="">Collections</a></li> 
        <li><a href=""><span style="color:#f05050;">Sale</span></a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="">My Account</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</div> 

CSS

.navbar { 
    margin-top: 10px; 
} 

.navbar-default { 
    border-width: 0px; 
    border-radius: 0px; 
    font-size: 12px; 
    font-weight: bold; 
    color: black; 
    border-bottom: 5px solid #000000; 
    color: #FFF; 
    background: #fff; 
} 

.navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a { 
    text-shadow: none; 
    color: #000000; 
} 

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > ul > li, .navbar-default .navbar-nav > li.focus > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:visited, .navbar-default .navbar-nav > li:hover > a:hover { 
    background-image: #1c2b36; 
    background: #1c2b36; 
    background-color: #1c2b36 !important; 
    color: #FFF; 
    border-bottom: 5px solid #3bc0c3; 
    -webkit-transition: all ease-in .1s; 
    -o-transition: all ease-in .1s; 
    -moz-transition: all ease-in .1s; 
    -ms-transition: all ease-in .1s; 
    transition: all ease-in .1s; 
} 

Answer 1

はそれを押し下げるので、余分なスペースを占有します。 li要素または要素のいずれかにマウスを移動すると境界線が描画されます。ほとんどliタグ私は推測

​​

（OR）

それが推移した場合には、色のみの変更と内容は、このdown.Likeプッシュされないようにあなたが見えない border-bottom liに要素を追加することができます

：

.navbar-nav>li { 
    border-bottom:5px solid transparent; 
} 

EDIT：あなたのbootplyによると

は、次の操作を行います。

.navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a { 
    text-shadow: none; 
    color: #000000; 
    border-bottom:5px solid transparent; //add this in CSS already present there 
}