Ich habe ein Nav-Menü, dem ich einen 3px-Rahmen als festen Rahmen hinzufügen möchte. Das Problem ist, wenn Sie den Mauszeiger über diese li bewegen, drückt ihr Rahmen den übergeordneten Container div mit einem festen 1px-Rahmen nach unten. Was wäre der beste Ansatz, um sowohl das Navigationsmenü als auch den übergeordneten Container auf einer Ebene zu halten, während die Grenze des Navigationsbereichs die untere Grenze des Containers überlagert? (Bitte beachten Sie, dass die Kommentare nur dazu da sind, den zusätzlichen Abstand zwischen den Inline-Block-Elementen zu entfernen).
HTML
%Vor%CSS
%Vor%Sie könnten es mit einem transparenten Rand verschieben.
%Vor% Alternativ könnten Sie eine negative Marge von 3px auf :hover
Ich würde mit der ersten Lösung gehen.
Dies würde Ihnen das geben, was Sie wollen, obwohl es Box-Shadow anstelle von border verwendet. Aber es ist eine schnelle und einfache Lösung.
%Vor%Eine weitere Option wäre, nur 3px weniger zu Ihrem Element hinzuzufügen, das Sie vorher 10px hatten, also machen Sie es 7px, könnte den Trick machen
%Vor%