Глюк мерцает при всплывающем списке меню

У меня есть проблема, когда я хочу сделать рамку вокруг списка меню. Но я никогда не видел ничего подобного. Когда я навожу курсор на свой список меню, он мерцает? jsfiddle имеет полный код.

Вот ссылка на jsfiddle

li {
  display: inline-block; 

    position:relative;
    line-height: 7vmax;
    vertical-align: middle;
 }



ul li a {color:rgb(23,123,177);text-decoration: none;margin-left:5vmax;font-size:1.3vmax;}

a:hover { background-color: #2c3e50;
  padding: 1vmax;}

Кто-нибудь знает, почему это так? И как я могу это исправить? Спасибо.


html css jsfiddle
person Community    schedule 20.04.2018    source источник
comment
У меня не мерцает, какой у вас браузер?   -  person MMallette    schedule 21.04.2018
comment
о, извините, я забыл добавить, что вам нужно растянуть окно в jsfiddle, пока весь список не будет в ОДНОЙ строке, тогда вы увидите глюк, я использую google chrome   -  person    schedule 21.04.2018

Ответы (1)


arrow_upward
0
arrow_downward

Мерцание и прыжки вызваны padding, который вы добавляете к hover.

Просто добавьте padding к своему обычному состоянию следующим образом:

ul li a {
  color:rgb(23,123,177);
  text-decoration: none;
  margin-left:5vmax;
  font-size:1.3vmax;
  padding: 1vmax; // add it here
}

a:hover { 
  background-color: #2c3e50;
  // remove it here
}

Я создал ответвление вашего кода и обновил его: https://jsfiddle.net/7jsf9o2t/1/

person Orlandster    schedule 20.04.2018
comment
Спасибо за Ваш ответ - person ; 21.04.2018