Um dein eigentliches Problem zu klären:
Es liegt in der Tat an den paddings. Du setzt für die li-Elemente ein padding von 10px.
Der Button hat eine height, die sich von den anderen li-Text-Elementen unterscheidet. Er ist höher. Deswegen steht der Button unten raus.
In dem du NUR dem button ein padding-bottom: 7px; gibst, ist das Problem prinzipiell gelöst.
Nun aber zu einem anderen 'Problem', das kein richtiges Problem ist, sondern eher ein (Anfänger-???)ansatz bei deinem Dropdown-button. Hier mal eben deine Version (gekürtzt):
HTML:
<nav class="nav-wrap">
<ul class="nav">
<li><div class="dropdown">
<button class="dropbtn">Rezepte</button>
<div class="dropdown-content">
<a href="vorspeise.html">Vorspeise</a>
<a href="hauptgericht.html">Hauptgericht</a>
<a href="nachspeise.html">Nachspeise</a>
</div>
</div>
</li>
</ul>
</nav> <!-- / .nav-wrap -->
Du packst das Dropdown in ein div, welches beim hovern eines buttons dann das div anzeigt.
Dies ist ein sehr ungüblicher Ansatz.
Ich weiß, wenn ich dir die Lösung vorsetze, dann copy-pastest du es eventuell, aber ich kann dir nur empfehlen, dich damit genauer zu beschäftigen und es versuchen zu verstehen.
Schau dir aber erst die CSS-Selektoren an, da du diese eventuell brauchen wirst, um meine Lösung zu verstehen:
https://www.w3schools.com/cssref/css_selectors.asp
Ist nicht sonderlich schwer. Hier meine Lösung:
https://jsfiddle.net/Aaron3219/5daqy21p/