Как сделать чтоб пункты меню не «прыгали» из за border?

Question

[Павел]

codepen.io/mrusklon/pen/YpBErG

если навести на пункт 2-5 то все скачет , как избежать?

Answer 1

[Aleksandr]

codepen.io/sashqa/pen/ENrbbq
как вариант

Answer 2

[Григорий]

можно так
ul li a{
padding: 5px 10px;
background-color: #ccc;
border: 5px solid #fff;
}

Answer 3

[Pretor DH]

.nav a:hover,
.liActive{
  border: 5px solid #000;
  margin:-5px;
}

или

.nav a:hover,
.liActive{
  outline: 5px solid #000;
}

И вообще пора использовать тег <nav>.
А <ul><li> должны применяються только для списков в контенте:

<nav class="nav navbar-nav headMnu">
  <a class="liActive" href="#">Главная</a>
  <a href="#">пункт2</a>
  <a href="#">пункт3</a>
  <a href="#">пункт4</a>
  <a href="#">пункт5</a>
  <a href="#">пункт6</a>
</nav>