Bootstrap - Zusammenbruch navbar Fehler, wenn eine Grenze auf Hover

Question

Zugabe fügte ich einen border-bottom auf meinen navbar li auf schweben wie folgt aus:

.navbar-default .navbar-nav li a:hover{ 
    border-bottom: 4px solid #62c4a4; 
} 

aber dies bewirkt, dass der navbar-Zusammenbruch als winzige Box erscheinen mit einer Bildlaufleiste, anstatt die Listenelemente zu erweitern.

Wie kann ich sicherstellen, dass der navbar-Zusammenbruch erweitert normal und die Grenze auf Hover-Effekt zeigt noch?

Code Stift http://codepen.io/meek/pen/NNprYb

Answer 1

Versuchen height von .navbar-collapse.collapse.in .navbar-nav-auto, wie diese Einstellung:

.navbar-collapse.collapse.in .navbar-nav { 
    height: auto; 
} 

Da die Bootstrap CSS wird die height zu 70px Einstellung, die Höhe der Navigationsleiste. Sie möchten es ändern (Einstellung auf), wenn das Menü aktiv ist.

Answer 2

Ich glaube, das hat damit zu tun, dass Sie die Höhe auf 70px einstellen;

.navbar-default, .navbar-nav { 
//height: 70px; 
} 

Wenn Sie das kommentieren, erhalten Sie die Bildlaufleiste nicht.