1

CSSとHTMLのみを使用して、子ulサブメニューを親メニューと水平に揃えたい。

HTML:

    <ul>
       <li><a href"#">Item 1</a>
       <ul>
          <li><a href"page1.html">Item 1 child 1</a></li>
          <li><a href"page2.html">Item 1 child 2</a></li>
          <li><a href"#">Item 1 child 3</a></li>
       </ul>
       </li>
       <li><a href"page3.html">Item 2</a></li>
       <li><a href"page4.html">Item 3</a></li>
    </ul>

CSS: 

    li{
      list-style: none;
      height:22px;
      font-size: 13px;
      background:#eee;
      width:110px;
    }

    li ul{
      margin-left:100px;
      top:0;
    }

出来ますか？

最終的な結果は、親メニューと子メニューの両方が同じ行に水平になるようにする必要があります

私がこれまでに行ったことを見てください: http://jsfiddle.net/cqfwj/

4

1 に答える 1

0

うーん、解決策を提供できると思います（他にもあると思いますが）。

相対位置と絶対位置を使用して、関連する要素の位置属性をいじるだけです。

CSS で追加/変更したスタイル定義は次のとおりです。

ul{
    position:relative;
}

li ul{
    margin-left:100px;
    position:absolute;
    top:0;
}

これがどのような結果になるかを示すために、更新された JSFiddleを次に示します。

これにより、探している動作が得られるはずです。そうでない場合はお知らせください。さらにサポートさせていただきます。幸運を！

于 2013-07-03T17:36:31.377 に答える