Скачет меню CSS

• Ещё один способ с использованием функции cals
• outline и z-index в Opera

Свойство CSS border можно применить к любому HTML элементу, например, пункту меню li, на который навели курсор мышки.

• 111
• 222222
• 333333333
• 444444444444

<style>
.skachet li {
  display: inline;
  background: #ccc;
  padding: .5em 10%;
  line-height: 2.6em;
}

.skachet li:hover {
  border-bottom: .5em solid blue;
}
</style>

<ul class="skachet">
  <li>1
  <li>2
  <li>3
  <li>4
</ul>

Ничего не прыгает и не скачет, потому что, в отличии от inline-block и block, border не меняет высоту элемента при inline, только его ширину. А в примере указана рамка только для нижней стороны.

Распространим рамку для всех сторон.

• 111
• 222222
• 333333333
• 444444444444

<style>
.skachet li {
  display: inline;
  background: #ccc;
  padding: .5em 10%;
  line-height: 2.6em;
}

.skachet li:hover {
  border: .5em solid blue;
}
</style>

Видите как при наведении на список, он увеличивается в ширину, занимая больше места справа?

Для того, чтобы убрать все эти "полёты", зададим прозрачный или того же цвета, что и фон, border для обычного состояния. То есть зарезервируем необходимое пространство (актуально не только для меню).

• 111
• 222222
• 333333333
• 444444444444

<style>
.skachet li {
  display: inline;
  background: #ccc;
  padding: .5em 10%;
  border-left: .5em solid #ccc;
  border-right: .5em solid #ccc;
  line-height: 2.6em;
}

.skachet li:hover {
  border: .5em solid blue;
}
</style>

А что, если пункты имеют ширину в % (посмотреть практический образец). Как зарезервировать в этом случае border, дабы избежать смещения и съезжания? "Поколдовать" с CSS background?

• 111
• 222222
• 333333333
• 444444444444

<style>
.skachet li {
  display: inline-block;
  width: 25%;
  padding: .8em 0;
  text-align: center;
  background: #ccc;
  background-image: linear-gradient(to top, #fff .5em, transparent .5em), linear-gradient(to bottom, #fff .5em, transparent .5em);
}

.skachet li:hover {
  background-image: linear-gradient(to left, blue .5em, transparent .5em), linear-gradient(to right, blue .5em, transparent .5em), linear-gradient(to top, blue .5em, transparent .5em), linear-gradient(to bottom, blue .5em, transparent .5em);
}
</style>

Или box-sizing?

• 111
• 222222
• 333333333
• 444444444444

<style>
.skachet li {
  display: inline-block;
  width: 25%;
  padding: .3em 0;
  border-top: .5em solid #fff; border-bottom: .5em solid #fff;
  text-align: center;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  background: #ccc;
}

.skachet li:hover {
  border: .5em solid blue;
}
</style>

Альтернативные варианты, когда рамка отображается поверх соседних элементов, позволяющие избавиться от дёрганья и дрыганья: outline (не может закругляться) или box-shadow.

• 111
• 222222
• 333333333
• 444444444444

<style>
.skachet li {
  display: inline;
  background: #ccc;
  padding: .5em 10%;
  line-height: 2.6em;
}

.skachet li:hover {
  outline: .5em solid blue; /* или box-shadow: 0 0 0 .5em blue; position: relative; */ 
}
</style>