выпадающее по :hover меню отображается не корректно при замене <button> на <a>

грубо говоря, экспериментирую в этом примере
<https://html5css.ru/howto/howto_css_dropdown_navbar.php>

если заменить кнопку на ссылку, выпадающее меню отображается не под родительской ссылкой, а выше.
скажите плиз куда рыть.
<script async src="//jsfiddle.net/JohnDoe_docs77/pn5fdL9r/3/embed/"></script>