ガイドルートの2級メニューの寸法の難点

ガイドコース

以上は、2段のメニューを表示するときに遭遇する困難です.

副菜をメイン料理の下端に置くにはどうすればいいですか?

上はメインメニューとサブメニューの表示で、サブメニューはメインメニューのaラベルの下にあります.

.submenu{
    position: absolute;
    left: 0;
    width: 100%;
    min-width: 700px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

position:absoluteサブメニューがどのように下向きになっているのか理解できません.

まず、全てのスタイルを削除した状態を以下に示し、完了した状態を以下に示す.

メイン料理はどうやって席に着いて、副菜は下に降りますか?
https://www.daleseo.com/css-position-absolute/
こちらのブログを見ればわかります.position:absoluteと宣言されると、要素は画面上に独自の固有の位置を有し、親要素から「独立」する.より正確には、親要素(親要素)では、position:absoluteを有する最近の要素を基準として絶対的な位置を有する.ここで、position: relativeの1つの位置を有する最も近い要素はhtmlであるため、htmlルートを基準として絶対的な位置を有する.
relativeのみ適用される場合、position:absolute、left、right、bottom、topの標準点は別途明記されていないため、既存の漫画メニューの位置を基準に親から離れた要因があり、自分の位置がある.

その後、left: 0を造形し、一番上の要素がleft:0の位置に移動し、ブロック領域はすべて使用され、中央に位置合わせされる.

.submenu {
    ...
    width:100%;
    text-align: center;

やればいいtext-align: centerを見ると上位要素から引き継がれるので明確な造形は必要ありません.

作成字下欄

、以下のようになります

まず、これもposition: absoluteプロパティを使用して作成され、仮想要素セレクタ::afterを使用して作成されます.

まず視覚的にはっきり見えるようにborder属性を深くマークします.上は::afterを除いて、何の造形もしていない様子です.borderには、要素の後ろにある仮想領域が表示されます.

スタイルを::afterに設定すると、従来のposition: absoluteの位置から離れ、::afterを基準として独立した位置を有し、現在はサブメニューのposition: relativeラベルがliに設定されている.

親要素position: relativeがliと表記されている場合、position: relativeおよびposition:absoluteが::afterに変換されると、このような移動が行われる.
left:0タグからli属性が削除されると、position: relative属性は、上記最上位、html要素に基づいて適用される.
left:0を順番に渡すと上の位置が出てきますが、それはleft:0; right:0; bottom: -15px;のdisplay: blockラベルを基準に作られています.これを文字の大きさだけの棒に描いてみます.
レッスンではa属性を利用してロッドの長さを調整することもできますが、そうなると字数の変更でwidthも変更されるのでメンテナンス面では難しいです.

字をwidthのラベルで包み、spanのラベルを基準に同じ造形を行い、字の下にのみ図形を生成します.

.submenu_item  span{
    position: relative;
}

.submenu_item.active span::after,
.submenu_item:hover span::after{
    position: absolute;
    content: "";
    right: 0;
    bottom: -15px;
    left: 0;
    border: 3px solid #000;
}