html - 幅: ドロップダウンナビゲーションで自動が機能しない

Question

これを説明するのは非常に難しいので、JS-Fiddleを作成しました。

「製品」タブの下で、私が作成したリストの 2 番目のリンクを非常に長く見てみると、結果として、リストの境界からはみ出しています。リンクが非常に長い場合、含まれている ul の幅がリンクを含むように伸びるようにするにはどうすればよいですか?

再び JSfiddle を見ると、何が起こっているのか、何をする必要があるのかがより明確になります。

PS - HTML をまったく編集せずに動作させる必要があります。

//Ignore this

score 3 · Accepted Answer

リストの固定幅を削除するだけです：

ul li {
    display: block;
    position: relative;
    float: left;
    width: 140px; // <-- Remove this
    height: 25px;    
}

リストのデフォルトの幅が自動になり、完了です。

score 2 · Accepted Answer

をに変更するwidth:140px;だけmin-width:140px;ですul li

デモ：

score 0 · Accepted Answer

ネストされたリストに固定幅を設定しています。

ul liスタイルを次のように変更します。

#menu > li {
    display: block;
    position: relative;
    float: left;
    width: 140px;
    height: 25px;
}

これにより、ネストされた s から固定幅が削除されul、必要なだけのスペースを取ることができます。

jsフィドル

score 0 · Accepted Answer

<li>トップレベルメニューのスタイルから s の幅を制限しています。これにより、トップレベルメニューの意図が維持さwidth: 140px;れ、サブメニューのサイズがそのコンテンツに基づいて調整されます。

ul#menu li ul li {
    width:auto;
}