Ein Link in einem li bedeckt nicht die gesamte Oberfläche

Ich entwerfe eine Navigationsleiste. Der Code sieht so aus:

In css habe ich den folgenden Code für die li-Elemente:

Erzeugt folgende Schaltfläche:

Das Problem ist, dass der durch Links klickbare Bereich (oben blau dargestellt) nicht die gesamte Oberfläche der Schaltfläche abdeckt. Wenn ich also auf die Ränder der Schaltfläche klicke, funktioniert es nicht. Ich habe versucht, mit padding -Wert zu spielen, konnte aber das Problem nicht lösen. Gibt es eine einfache und effiziente Möglichkeit, den Link so zu gestalten, dass er den gesamten Bereich der Schaltfläche abdeckt, so dass er überall dort funktioniert, wo die Schaltfläche geklickt hat?