0

やあ

http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html#からのこのファット メニュー コードがあります。

<ul id="main">
<li><a href="" class="drop">Home</a>
    <div class="dropdown_2columns"><!-- Begin 2 columns container -->

        <div class="col_2">
            <h2>Welcome !</h2>
        </div>

        <div class="col_2">
            <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>             
            <p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>             
        </div>

        <div class="col_2">
            <h2>Cross Browser Support</h2>
        </div>

        <div class="col_1">
            <img src="img/browsers.png" width="125" height="48" alt="" />
        </div>

        <div class="col_1">
            <p>This mega menu has been tested in all major browsers.</p>
        </div>

    </div
</li>

スタイルの関連部分は次のとおりです。

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
    left:-1px;
    top:auto;
}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
}

#menu li:hover {
}

#menu li a {
    display:block;
    outline:0;
}   

    #menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
    padding-right:21px;
    background:url("img/drop.png") no-repeat right 8px;
}

ドロップダウン メニューの位置は絶対位置として言及されていますが、絶対位置 (つまり座標) については言及されていません。position:absolute を削除すると、後続の要素 (「5 つの要素」など) がドロップダウン メニュー (つまり、メニューバーから「ホーム」メニューを選択した後にポップアップするメニュー) の周りにフロートされます。したがって、absolute はドロップダウンをメニューバーのホームの真下に配置し、次のメニュー「5 列」をドロップダウン メニューの隣ではなく、メニュー バーの「ホーム」の隣に配置します。それでは、上/下/左/右の座標の値に言及せずに、これはどのように機能しますか (つまり、ブラウザは絶対としてレンダリングされることをどのように理解していますか)? w3schools のものなどの position: absolute の他の例では、位置が直接、つまり top として言及されています。10px、左: 5px など。しかし、ここでは魔法のように起こっています (しかし、私の理解にはまったく役立っていません)。ですから、これを理解するのを手伝ってください。そのような助けをいただければ幸いです。

ありがとう

4

1 に答える 1

0

子要素がposition:absoluteで、親が の場合、子は親position:relativeの位置を継承します。次に例を示します。

http://jsfiddle.net/charlescarver/CdBHQ/

relative親があなたが投稿した例である理由の 1 つは、ドロップダウンをナビゲーション バーと一緒に移動させたいからです。位置をハードコーディングすると、位置が変わるたびに再度ハードコーディングする必要があります。

あなたの例では、各列に幅が与えられています。ただし、その開始位置はrelative親から継承され、自然に右に流れます。

于 2013-04-14T04:39:42.283 に答える