2

私が言いたいことを理解してもらうために、ここに JSfiddle を作成しました。基本的に、「製品」と「お問い合わせ」のドロップダウン メニューを見ると、各リスト項目はコンテンツに合わせて十分な幅があります。これにより、ドロップダウン メニューが「壊れた」外観になります。すべてのリスト アイテムを、リスト内の最も幅の広いリスト アイテムと同じ幅にしたいと考えています。（私の言いたいことを理解するには、添付のモックアップを見てください）。

また、「ホーム」や「私たちについて」などの「主要なリンク」にカーソルを合わせると下の境界線が表示されるため、ドロップダウン項目にカーソルを合わせると、ドロップダウン メニューが 5 ピクセル上に移動するなど、少しイライラします。そして、これを修正する方法がわかりません。

非常に重要:リスト項目に静的な幅を設定したくありません!

それがどのように見えるべきかのモックアップ:

ここに画像の説明を入力

//Ignore this comment
4

1 に答える 1

2

設定してみてください

li a {
    border-bottom: 5px solid rgba(255,255,255, 0);
}
.secondary-list li {
    float: none;
}

jsFiddle

アンカーに非表示の境界線を設定すると、境界線を追加して次の要素を5ピクセル下に移動する代わりに、ホバーによって色が変更されます。

2番目のレベルの要素のfloatを削除するliと、リストの全幅（=最も幅の広い幅li）が使用されます。

于 2013-02-25T09:11:10.933 に答える