2

次のようなネストされた ul リストで構成されるナビゲーション メニューがあります。 

<ul id="menu">
    <li class="category top_level">
         <a href="#" class="category_name top_level_link">top level 1</a>
        <ul class="dropdown">
            <li class="item " >
                <a href="">item 1</a>
            </li>
            <li class="item ">
                <a href="">very long name of item 2</a>
            </li>
        </ul>   
    </li>
    <li class="category top_level">
        <a href="#" class="category_name top_level_link">longer top level name 2</a>
        <ul class="dropdown">
            <li class="item " >
                <a href="">very long name of item 3</a>
            </li>
            <li class="item ">
                <a href="">item 4</a>
            </li>
        </ul>   
    </li>                  
</ul>

現在のCSSは次のとおりです。

    #menu ul{list-style-type:none;}
#menu li.top_level{vertical-align:top;zoom:1;display:inline;margin:2px;padding:0 1px 0 0;}
#menu .dropdown{float:none;z-index:100;position:absolute;width:180px;height:0;overflow:hidden;-webkit-transition:height 700ms;-moz-transition:height 700ms;}
#menu .category:hover .dropdown,#menu .category:focus .dropdown{-webkit-transition:height 940ms;-moz-transition:height 940ms;}
#menu .item a,#menu .category a,#menu .category a:visited,#menu .item a:visited{-webkit-transition:background-color 940ms;-moz-transition:background-color 940ms;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1em;text-decoration:none;display:block;font-family:ColaborateLightRegular;color:#555;padding:.6em;}
#menu a.top_level_link{color:#555;background:none;padding:.4em .6em;}
#menu .dropdown a{text-align:left;}
#menu .item a:hover,#menu .category a:hover,#menu .item a:focus,#menu .category a:focus{text-decoration:none;-webkit-transition:all 0;-moz-transition:all 0;background:#d9d2d2;}
#menu .selected a{background:#d4d2d2!important;}

最上位のカテゴリとリストの長さが異なります。ドロップダウン アイテムをトップ レベルのカテゴリと同じ幅にしたいと考えています。最上位のカテゴリには、css に「幅: 自動」があります。幅がドロップダウンに継承される場合、トップ レベルの実際の幅を継承するのではなく、幅を「自動」として継承します。どうすればこれを修正できますか? ここに私が欲しいものと私が持っているものの写真があります：

例

私は何をする必要がありますか？

4

3 に答える 3

9

1: CSS をフォーマットしてください。
2: そのコードには、実際に機能させるためのビットが欠けているように見えますか?

答えは:
一般概念: 子要素 (.dropdown) をwidth:100%に設定し、親要素 (.top_level) をposition:relative;設定する必要があります。
これは、子の絶対配置が親に対して相対的に行われることを意味します (これは、配置があなたの希望をどのように解釈するかについての奇妙さに関係しています)。そして、それらの幅は親の幅と同じになるように設定されます。わーい！

もちろん、それは実際には機能しませんdisplay:inline。あなたがトップレベルにいるからだと思います。親要素を display:block; に変更し、それらをフロートさせて、再び隣り合わせに戻しました。

[display:inline-block;実際に必要な動作の種類に応じて、フロートの代わりにこれを行うこともできます]

改訂された (インデントされた) css を参照してください。

#menu li.top_level{
  vertical-align:top;
  zoom:1;
  display:block;
  float:left;
  width:auto;
  position:relative;
  margin:2px;padding:0 1px 0;
}

#menu .dropdown{
  float:none;  
  z-index:100;
  position:absolute;
  width:100%;
  height:0;
  overflow:hidden;
  -webkit-transition:height 700ms;-moz-transition:height 700ms;
}

#menu .category:hover .dropdown,#menu .category:focus .dropdown{
  -webkit-transition:height 940ms;
  -moz-transition:height 940ms;
  height:auto;
}

ご覧になりたい場合は、これに取り組むためにjsfiddleのデモも投げました：http://jsfiddle.net/UPRAc/1/

于 2012-09-10T01:52:58.417 に答える
1

これを行うと、あなたが望む結果が得られると思います：

追加

margin:0;
padding:0;

削除する

position:absolute;
width:180px;

これについて： #menu .dropdown

于 2012-09-10T01:51:31.523 に答える
0

これは純粋なcssでは不可能だと思います。

継承しようとしましたが、うまくいきませんでした。

于 2012-09-10T01:40:28.240 に答える