ナビゲーションバーの下枠のCSS

Question

ナビゲーション バーがあり、リスト内の項目にカーソルを置くと下部に赤い線を追加しましたが、その赤い線をタイトル (例: 「サービス」) の下に移動したいのですが、どのように実現すればよいでしょうか?これ？

HTML と CSS コードを簡単に検査できるように、コードペンに小さな例を追加しました。

リーリー リーリー

コードリンクを表示

Answer 1

すべてのリスト要素をヘッダーと同じ高さにすればいいと思います。

＃＃＃このような：-＃＃＃

リーリー リーリー

Answer 2

タイトルの高さを固定でき、ナビゲーション バー項目の高さも固定できます。 また、ホバーすると li 要素が移動するという問題があります。また、要素に常に透明色の境界線を追加して、ホバー時に要素全体の高さが変わらないようにすることで、この問題を解決することもできます。

これは修正されたCSSです

リーリー

https://codepen.io/swarajgk/pen/JjZewPo?editors=1100