Zablokowane nav - błąd

[puzzelx]

Witam. Jestem początkującym programistą. Nigdy taki problem nie występował :/ Chodzi o to "skakanie"
Problem:
[youtube]https://www.youtube.com/watch?v=KycfD08qLhE[/youtube]

HTML: [code] <nav> <a class="menu" href="#portfolio">Portfolio</a> <a class="menu" href="#omnie">O mnie</a> <a class="menu" href="#kontakt">Kontakt</a> </nav>[/code] CSS: [code] nav { margin-top: 200px; } a { text-decoration: none; color: #ffffff; font-size: 15px; } .menu:hover{ border-radius: 20px; border-style: solid; border-color: #FFFFFF; } a.menu{ padding: 15px 15px; display: inline-block; width: 20%; }[/code]
Jeżeli zły dział to proszę o przeniesienie i z góry przepraszam.

Pozdrawiam, puzzel! Edytowane 28 Listopada 2017 przez Gość

[MMGFX]

Dzieje się tak ponieważ nie masz zdefiniowanego bordera na elemencie a. W momencie hovera dopiero go tworzysz. Co należy zrobić? Do a dodać border, a na hover zmienić tylko jego kolor. Poniżej działający kod

[url]https://codepen.io/anon/pen/YEJzoV[/url]

[puzzelx]

O Panie.. na logikę.. dzięki.. można lock :D