ホバー上のボーダーオーバーライドノーマル

Question

ちょっとこれを解決する簡単な方法があるかどうかわかりません： ナビゲーションの高さを伸ばさない青いボーダーの上に黒のボーダーを入れたいと思います。

私はインセットを見てきたAを底に加えることが、私は.navigationbar

HTML

<nav class="navigationbar"> 
    <ul> 
    <li> 
     <a href="index.html">One</a> 
    </li> 
    <li> 
     <a href="two.html">Two</a> 
    </li> 
    <li> 
     <a href="three.html">Three</a> 
    </li> 
    </ul> 
</nav> 

CSSから1

* { 
    margin: 0; 
} 
.navigationbar { 
    background-color: #000000; 
    width: 100%; 
    border-bottom: .1em solid #0000FF; 
} 

.navigationbar ul { 
    list-style-type: none; 
    overflow: hidden; 
} 

.navigationbar ul li { 
    float: left; 
    color: #FFFFFF; 
} 

.navigationbar ul li a { 
    height: 100%; 
    display: block; 
    color: #FFFFFF; 
    text-align: center; 
    text-decoration: none; 
    padding-left: 1em; 
    padding-right: 1em; 
    padding-top: 1em; 
    padding-bottom: 1em; 
} 

.navigationbar ul li a:hover { 
    background: #0000FF; 
    color: #FFFFFF; 
    border-bottom: .1em solid #000000; 
} 

.navigationbar img { 
    float: left; 
} 

https://jsfiddle.net/55r2e9bq/

Answer 1

を上書きしたいです

境界線を設定して後で色を変えてみませんか？

.navigationbar ul li a 
{ 
    border-bottom: .1em solid transparent; 
} 

.navigationbar ul li a:hover 
{ 
    border-bottom-color: #000000; 
} 

Answer 2

あなたが見ているの国境は、あなたがborder-bottom: .1em solid #000000;を持っているルール.navigationbar ul li a:hover{...}から来ています。それはナビゲーションバーの幅の100％まで拡大していませんが、それが高くなる原因となっています。 同じ高さのnavigationbarのステイが必要な場合は、a要素の通常の状態にも境界線を割り当てる必要があります。

この方法：

.navigationbar ul li a { 
    height: 100%; 
    display: block; 
    color: #FFFFFF; 
    text-align: center; 
    text-decoration: none; 
    padding-left: 1em; 
    padding-right: 1em; 
    padding-top: 1em; 
    padding-bottom: 1em; 

    border-bottom: .1em solid #ffcc00; /* add this property with the same value of the `:hover` state */ 
} 

Answer 3

あなたはその動き/高さの増加を避けるために、.navigationbar ul li aにborder-bottom: 0.1em solid #000000;を追加することができます。

https://jsfiddle.net/p7L7adhe/1/