Как устранить смещение при :hover?

Есть пример где при наведении курсора на элемент меню его border-bottom увеличивается в ширине, что вызывает смещение следующих элементов. Как этого избежать? Обычно в такой ситуации самое простое это задать аналогичный border-bottom элементу в изначальном состоянии со свойством transparent, но в данном случае это невозможно т.к. там border-bottom уже присутствуют. Заранее спасибо!
https://codepen.io/anon/pen/EOMMRG