0

最初のアイテムがその親のliアイテムと並ぶサブメニューを設定しようとしていますが、2番目のul（#innerNav）で負のマージンを使用せずにこれを行う方法はありますか。私のコードはhttp://jsfiddle.net/ueEEa/2/にあります

#parentNav {
  float: left;
  padding: 0;
  width: 160px;
  border-bottom: 1px dashed #999;
}

#parentNav > li, #parentNav > li > #innerNav > li {
  list-style: none;
  border: 1px dashed #999;
  display: block;
}

#parentNav li #innerNav {
  display: none;
}

#parentNav > li:hover >  {
  display: block;
  margin-left: 160px;
  width: 160px;
  padding: 0px;
  position:absolute
}

<div>
    <ul id="parentNav">
        <li>Item 1</li>
        <li>Item 2
            <ul id="innerNav">
                <li>Item 2.1</li>
                <li>Item 2.2</li>
            </ul>
        </li>
        <li>Item 3</li>
    </ul>
</div>
4

1 に答える 1

0

display: inline-blockの代わりに子ナビゲーションメニューを指定することで、これを行うことができますblock。

これを行うと、通常、その左端が親<li>要素の右端と同じ高さになります。そのため、これを修正するにはdisplay: relative、トップメニューとleft: 160px（トップメニューの幅に等しい）子ナビゲーションメニューにも指定する必要があります。

実際の動作をご覧ください。

于 2013-02-24T21:47:48.013 に答える