html - CSS ドロップダウンメニューの幅を調整

Question

CSS のみでドロップダウンメニューを作成していますが、私が行った方法では簡単にはなりません。これまでのところ、実際のドロップダウンを取得しましたが、幅は親要素の幅であり、特定の項目を 1 行に表示するには小さすぎます。

メニューの幅が短すぎる

手動で幅を設定しようとしましたが、それは全体の位置合わせを解除するだけであり、メニュー項目がはるかに長くなる可能性があるため実用的ではありません. 親の幅を変更せずに、コンテンツに適応する幅を持つ方法はありますか?

すべてのサイトファイルは次の場所にあります: http://dev.cuonic.com/bourree/

どんな助けでも大歓迎です、ありがとう:)

score 0 · Accepted Answer

Playing around in firefox/firebug I found that this combination seemed to produce the desired effect:

#menu ul ul li {
    display: block;
    float: left;
    left: -34px;
    position: relative;
    width: 200px;
}

enter image description here

score 0 · Accepted Answer

ドロップダウンに固定幅を使用しないソリューションを次に示します。

まず、ドロップダウンのリンクの CSS に次を追加します。

#menu ul ul li a {
    white-space: nowrap;
}

また、これらの CSS スタイルが第 1 レベルのメニュー項目にのみ適用されるように、をおよびにそれぞれ変更する必要が#menu ulありました。#menu ul li#menu > ul#menu > ul > li

>CSS セレクターでのの使用に関する基本的なリファレンスを次に示します。この例には、それが役立つ他のスポットがあると思います。

html - CSS ドロップダウン メニューの幅を調整