1

CSS ベースのドロップダウン ナビゲーションに小さな問題があります

ここに、現在の状態を表す小さなフィドルがあります:
http://jsfiddle.net/VXafN/
スライドアウトは、フィドルのように純粋に CSS ベースでなければなりません。

#main-nav > ul > li:hover > ul {
    display: block;
}


問題は、各サブ <ul> (黄色の境界線) の親 <li> 要素 (赤い境界線) がサブナビゲーションのフルサイズに伸びるという事実です。
私のデモでは、最上位の <li> 要素に固定幅を設定していないことがわかります。固定幅にしたくありません。サブナビゲーションのコンテンツが大きすぎる場合、それらは大きすぎます。

私が達成しようとしているのは次のようなものです:
http://jsfiddle.net/6XERQ/ (固定幅を追加しただけ) <li> 要素に固定幅
がなく、最良の場合、ul はparent-<li> 要素と自動幅 (黄色の境界線) を取るだけです

後で JavaScript を使用したり、DOM を操作したりすることもできますが、これにはもっとクリーンな CSS ベースのソリューションがあるはずです。この場合、いかなる種類のハックや汚れたマークアップも使用したくありません。

child-<ul> は、その子が必要とする全幅を持つ必要がありますが、parent-<li> は、使用するリンクテキストに合わせて調整する必要があります

これを達成するためのハックではない方法はありますか？
私はこれを最新の状態に保ち、それに応じて必要な情報を提供します

あなたの助けとインスピレーションを前もって感謝します

4

1 に答える 1

1

http://jsfiddle.net/6XERQ/2/

position:absoluteサブメニューで使用します。

これを使用したライブサイトの例: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate

CSS:

#main-nav > ul > li {
    position: relative;
    padding: 5px;
    float: left;
    border: 1px dashed red;
    white-space: nowrap;
    width: 120px;
}

#main-nav > ul > li:hover > ul {
    display: block;
    position: absolute;
    top: 30px;
    left: 0;
}
于 2013-03-20T16:04:19.510 に答える