Glitch flickering with hovering menu list

Question

I have this problem where I want make a box around a menu list. But I've never seen something like this. When I hover over my menu list it flickers? The jsfiddle has the full-code.

Here is the link to 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;}

Does anyone know why is this? And how can I fix this? Thanks.

Answer 1

The flickering and jumping are caused by the padding you're adding on hover.

Simply add the padding on your normal state like this:

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
}

I've created a fork of your code and updated it: https://jsfiddle.net/7jsf9o2t/1/