css - 境界線を調整するCSS水平ドロップダウン

Question

ホバー時にドロップダウンメニューの周囲に境界線が必要です。トップメニューの左右の境界線をドロップダウンの境界線に合わせたいです。また、トップメニューのテキストの下に境界線が表示されないようにします。はっきりと説明しているのかわからないので、欲しいものの写真を入れています。

これが私の試みです

Answer 1

かっこいいスタイルですね。これを実装するには、CSS で次のことを行う必要があります。

タブ (#nav ul li a) には、白い背景と、上下左右に黒い境界線が必要です。

ドロップダウンには、白い背景とすべての側面に黒い境界線が必要です。

トリックはz-index、タブをドロップダウンの上に配置し、ホバー時にタブを少し高くするために使用することです。タブの下部は、ドロップダウンの上部境界線の一部を覆うために、タブ行の下部より下に拡張する必要があります。それは理にかなっていますか？

CSS の作成についてサポートが必要な場合は、質問にコードを追加することをお勧めします。

お役に立てれば！