javascript - 左側にサブリストを表示する CSS プロパティ

Question

このようなメニューがあります。「tanfa demo example」にカーソルを合わせると、サブリストが RHS に表示されます

問題は、私の場合、メニュー全体が右端にあることです。サブリストを LHS に表示したい。

CSS「左：0;上：0;」を使用してみましたプロパティですが、それは親要素の左上隅にサブリストを表示するだけで、次のように重なります。

ここに画像の説明を入力

親の「左: 0; 上: 0」からメニューを開始したいのですが、左に向かってスライドします。CSSによる解決策を好むでしょう。

score 3 · Accepted Answer

right: 100%の代わりに試しleft: 0てください。これは基本的に、メニューの左端を親の左端に配置するように指示します。right: 100%右端を親メニューの左端に揃えるように指示する必要があります。お役に立てれば！

score 2 · Accepted Answer

あなたの理解が正しければ、サブリストを親の左側に表示するには、そのleftプロパティをに設定します-100%。

#menu ul ul ul {
position: absolute;
top: 0;
left: -100%;
width: 100%;
}

score 1 · Accepted Answer

left：0は、位置を定義することを意味します。したがって、left：0の代わりに解決策は何ですか？ left：auto;を定義できます。。このように書いてください：

#menu ul ul ul {
position: absolute;
top: 0;
left:auto;
right:100%;
width: 100%;
}

または、jakeeがすでに説明しているように、 left：0を削除します。

これをチェックしてくださいhttp://jsfiddle.net/wEExT/9/

score 1 · Accepted Answer

これを試すことができます：子（ポップアップリスト）に負のマージンを設定= 2 x親リストのマージン

例: ポップアップリストにこのようなものを追加します。

{
    margin: 0 -300px; /* 0 denotes top and bottom margin : 0 */
}

PS: コードを見てもお勧めできません。適切に動作させるには、コードをさらにいくつか変更する必要があります

4 に答える 4