4

以下のように表示されるメニュー ( jsfiddle<ul> ) があり、<li>要素から構築されています。

ここに画像の説明を入力

子メニュー要素は親要素の下に表示され、コンテナは固定幅<ul>です。私が抱えている問題は、メニュー要素がさらに右にある場合、次のように、この第 2 レベル<ul>が親要素の幅をオーバーフローすることです。

現在の状態

サブメニューが最初の図のように表示されることを確認するにはどうすればよいですか?ただし、メニュー要素の右端は、オーバーフローするのではなく、サイズをそのままにして、右の境界線までしか移動しませんか?

ここに画像の説明を入力

4

3 に答える 3

4

コンテナにoverflow-xを追加します（おそらくyを保持したい...）非表示..

#navigation{
    width:900px;
    margin:0px 0 13px;
    padding:0px;
    float:left;
    background:#3b6daa;
    overflow-x:hidden; <------------------------------- note the X..
}

または、メニューの幅が固定されていないことを確認してください。

#navigation>ul li ul {
    float: left;
    padding: 8px 0;
    position: absolute;
    left:auto; 
    top:42px;
    display: none;
    width:auto;   <------------------- will make it adjust to the contain and the content
    background: #81abdd;
    color: #1c508e;
    list-style: none;
}

または、別の位置に揃えたい場合 (親の右または左に揃えるツールチップのように..その後、javascript パスをたどることをお勧めします..)

ここではいくつかの例を示します。

jquery vertical align 2 divsの整列例

jQueryの位置（幅などもチェックしてください） http://api.jquery.com/position/

http://craigsworks.com/projects/qtip/のあちこちに配置された優れたツールチップ

すぐに使える例ではありませんが、これは正しい方向性を提供するはずです..

于 2013-05-18T00:30:39.093 に答える
1

を使用して、すべての要素に親 div を追加できますoverflow: hidden;。

このように

于 2013-05-18T00:27:37.510 に答える
1

以下をコンテナーに追加します。

overflow-x: hidden;

また、サブメニューが表示されるように高さを追加する必要があります。

特定のサブメニューをさらに左に移動するには、その<ul>要素にクラスを追加してから、css を追加してそれらをターゲットにし、必要なだけ左に移動する必要があります。

push_left例: クラスをサブメニュー要素に追加すると、次の<ul>ようにターゲットにできます。

#navigation>ul li .push_left {

    position: absolute;
    top: 42px;
    left: 0px; /* set this value to however far left you want the sub-menu */

}
于 2013-05-18T00:28:42.053 に答える