1

純粋な css 駆動のドロップダウン メニューでの配置に苦労しています。左側のオプションは正常に機能しています。このコードは、オンラインで見つけたコードに基づいています。問題なく動作します。

右端のメニューをドロップダウンさせ、画面から切り取られないようにしようとしています - 相対的な配置と右にフロートを組み合わせて使用​​する必要があると思いますが、目的の効果なしで多くの組み合わせを試しました。

私は自分のコードを JSfiddle に入れてライブの例を示しました (実際、私が取り組んでいるものとほとんど同じです) - jsfiddle が適切に動作するように、CSS リセットのバッチを一番上に追加しました (私のライブ サイトでは、外部の CSS リセットを使用しています)。

JS フィドル: http://jsfiddle.net/g7Lk7/1/

    .pit_toolbar_ul ul{
    background:#fff; 
    background:rgba(255,255,255,0); 
    list-style:none;
    position:absolute;
    left:-9999px; 
    list-style-type:none;
    margin: 0;
}

右端のドロップダウンを画面の右端に揃える方法についての推奨事項をいただければ幸いです。

御時間ありがとうございます！

4

2 に答える 2

1

右のメニュー項目のright: 0代わりに使用する必要があります。left: 0このスタイルを追加して修正できます：

.pit_toolbar_ul li:hover ul.rightside {
    left: auto;
    right: 0;
}
.pit_toolbar_ul li:hover ul.rightside li {
    margin-right: 0;
}

rightside対応する にクラスを追加しulます。

http://jsfiddle.net/g7Lk7/2/

于 2013-05-04T18:21:51.370 に答える
0 
.pit_toolbar_ul li:hover ul.alignRight li
{
  position:relative;
  left:-30px;
}

このクラスをスタイル シートに追加すると、役立つ場合があります。ドロップダウンを配置しliました。

于 2013-05-04T18:24:03.710 に答える