Navbar CSS неправильно отображает функции наведения и пункты меню

Question

Раньше я задал вопрос о том, как сделать границу наведите на элементы меню без изменения размера изображения here, и один из участников дал мне решение, которое работает с тем, что я хочу. Но в последнее время я замечаю сбой в моем навигационном баре, где, когда он зависает над пунктами меню, он слегка мигает. Кроме того, последующие пункты меню не отображаются в строке, которая, по-видимому, плавает сверху. Я пробовал v-align="middle", но он, похоже, не работает. Проблема ухудшилась, когда я просматриваю интернет-проводник. То, что я пытаюсь достичь, - это что-то вроде навигационной панели Twitter, которая, когда кто-то нависает над элементом меню, появляется под элементом.

Вот мой файл JSFiddle к моему примеру.

Спасибо

Answer 1

Если вы хотите найти что-то вроде Твиттера навигационной панели, то самый лучший способ, чтобы посмотреть, как они это делают? Я сделал это для вас :) В навигационной панели Twitter переход сделан на height, а не на border. Очевидно, что анимация borders и paddings в то же время может привести к плохой анимации, как вы видели.

Проверить это минимальный пример создания с вашим собственным кодом: https://jsfiddle.net/yxmgehyt/4/

А вот соответствующий код CSS, который я использовал:

.nav{ 
    height: 50px; 
    overflow: hidden; 
} 

.nav li{ 
    float: left; 
} 

.nav li a{ 
    height: 55px; 
    border-bottom: 5px solid #6666CC; 
    -moz-transition: all .15s ease-in; 
    -o-transition: all .15s ease-in; 
    -webkit-transition: all .15s ease-in; 
    transition: all .15s ease-in; 
} 

.nav li a:hover{ 
    height: 50px; 
} 

Примечание: Другим возможным решением может быть с помощью псевдо-селекторов (:before и :after).