0

こんにちは、このような 2 レベルのメニューがあります

<ul>
  <li>MenuItem1</li>
  <li>MenuItem2</li>
  <li>MenuItem3
    <ul>
      <li>SubMenuItem3.1</li>
      <li>SubMenuItem3.2</li>
    </ul>
  </li>
</ul>

これはページの中央に配置された水平メニューで、MenuItem3 を選択するとそのサブメニューが表示され、その項目が MenuItem3 の下に表示されるようにする必要があります。私が説明するのは、次のようなものです。

MenuItem1   MenuItem2   MenuItem3
                          /\
             SubMenuItem3.1 SubMenuItem3.2

すでに水平に実行してサブメニューが表示されますが、サブメニューのサイズに合わせて MenuItem3 のサイズが大きくなります。だから、私が得るのは次のようなものです：

MenuItem1   MenuItem2           MenuItem3
                                   /\
                      SubMenuItem3.1 SubMenuItem3.2

それを修正する方法はありますか？純粋なCSSでそれは可能ですか?

ありがとう！

BenM リクエストの後、現在使用している CSS は次のとおりです。

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0; 
}

#menu > ul > li {
    position: relative;
    float: left;
}

#menu > ul > li > ul {
    list-style: none;
    margin: 0;
    padding: 0; 
}

#menu > ul > li > ul > li{
    position: relative;
    float: left;
}

-------------------------------------
編集 vol.2
--------- ---------------------------- Sen Jacob の提案の後、私は
これを少し修正しました。 -メニュー項目があり、適切な中央揃えに Javascript を使用しました。特に、JQueryのwidth()and関数を使用しました。position()それが理にかなっていることを願っています。

4

2 に答える 2

1

lisub を含むようにする必要があります。これを行うには、早期ulに閉じないでください。li

<li>MenuItem3</li>
    <ul>
      <li>SubMenuItem3.1</li>
      <li>SubMenuItem3.2</li>
    </ul>

になる

<li>MenuItem3
    <ul>
      <li>SubMenuItem3.1</li>
      <li>SubMenuItem3.2</li>
    </ul>
</li>
于 2013-02-21T12:06:43.357 に答える
1

これを達成しようとしていますか？

CSS3 家系図

次のスタイルjsFiddleを試してください

#menu ul {
    width:auto;
    clear:both;
    display:block;
    list-style: none;
    margin:0 auto;
}
ul li {
    display: inline-block;
    position: relative;
    text-align:center;
    padding: 2px;
}
li ul {
    position: relative;
    display:inline;
    top:25px;
    right:50%;
}
于 2013-02-21T12:08:51.323 に答える