how to make border when hover on menu element - css

Question

I want to make border around hovered menu element, i have a problem that when i hover the rest menu elements is moving right, since i used padding, how can i make it stay fixed?
.menu ul li {
display: inline-block;
}
.menu li {
line-height: 152px;
font-size: 14px;
padding-left: 40px;
text-transform: uppercase;
}
.menu a {
color: #000;
}
.menu li a.active {
color: #4bcaff;
}
.menu li a:hover {
border: 1px solid red;
padding: 5px;
}
<nav class="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>Features</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>

Answer 1

You should set the padding on the regular state of the <a> element instead of :hover. The :hover state inherits the padding of the regular state. So the padding and "big" flickering issue should be gone.
To avoid a "small" flickering issue on the :hover state, caused by the additional border you have to set a not visible border (with same border-width) to the regular state.
See the following solution, using the "placeholder-border" and border:
.menu ul li {
display: inline-block;
line-height: 152px;
font-size: 14px;
padding-left: 40px;
text-transform: uppercase;
}
.menu a {
color: #000;
padding: 5px;
border: 1px solid transparent;
}
.menu li a.active {
color: #4bcaff;
}
.menu li a:hover {
border: 1px solid red;
}
<nav class="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>Features</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
Another solution without the "placeholder-border" and border, using box-shadow:
.menu ul li {
display: inline-block;
line-height: 152px;
font-size: 14px;
padding-left: 40px;
text-transform: uppercase;
}
.menu a {
color: #000;
padding: 5px;
}
.menu li a.active {
color: #4bcaff;
}
.menu li a:hover {
-webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
}
<nav class="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>Features</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>

Answer 2

I suggest three changes (the third is what really solves your issue):
box-sizing: border-box for all elements - makes styling more consistent and intuitive.
Remove padding and instead add margin for the li elements. Remember that padding is additional space from the content to the border of the element; margin however is additional space outside the border so it is a better fit to put some space between items.
Add the padding for your a elements not only on hover, but also for their regular state; then on hover, make the padding 1px smaller in order to level the added 1px border.
* {
box-sizing: border-box;
}
.menu ul li {
display: inline-block;
}
.menu li {
line-height: 152px;
font-size: 14px;
margin-left: 40px;
text-transform: uppercase;
}
.menu a {
color: #000;
padding: 5px;
}
.menu li a.active {
color: #4bcaff;
}
.menu li a:hover {
border: 1px solid red;
padding: 4px;
}
<nav class="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>Features</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>