0

これが私のコードの簡略版です：

私がしようとしているのは、メニューの子を少なくとも親の幅にすることですが、長くすることもできます。

したがって、私の例では、「Short」サブメニューは問題ありませんが、「LongerParentThere」はそうではありません。

テーブルセルの自動入力のためにこのコードを保持する必要があります（別の方法がある場合を除く）：

#container {
    width: 350px;
}

#container > ul {
    width: 100%;
    display: table;
}

#container > ul > li {
    display: table-cell;
    text-align: center;
}

メニューには、他のサブレベルはありません。

JavaScript なしでこれを行う方法はありますか?

4

2 に答える 2

0

これらの行を既存の CSS に追加することで、(ほぼ) 目的を達成できます。

FFではなく、Chrome と IE で動作します。
（「普遍的な解決策」について読み続けてください。）

#container > ul > li { position: relative; }
#container > ul > li > ul { min-width: 100%; }
#container > ul > li > ul > li { white-space: nowrap; }

EDIT 1：
追加#container > ul > li:hover { display: list-item; }するとFireFoxとIE（少なくとも> = 9）では機能するが、Chrome（！）では機能しないこともわかりました。

EDIT 2 ：CSSハック（このページにあるように）の助けを借りて、コードをChrome、FF、およびIEで動作させることができました。で CSS 宣言を囲むと、@-moz-document url-prefix() {...}その宣言は FF だけが理解 (および適用) します。

「ユニバーサル」ソリューション。(Chrome、FF、IE で動作します。) 

#container > ul > li { position: relative; }
#container > ul > li > ul { min-width: 100%; }
#container > ul > li > ul > li { white-space: nowrap; }
@-moz-document url-prefix() { 
#container > ul > li:hover { display: list-item; }
}

こちらの (*UPDATED*) short demoも参照してください。

于 2013-05-23T09:04:02.990 に答える