0 
<ul>
   <li> 
      <ul class="submenu">
      <li></li>
      <li></li>
      <li></li>
      </ul>
    </li>
</ul>

ul クラス サブメニューは絶対位置です。つまり、 left: 0 は彼の先祖から始まりますが、各メニューのすべての ul サブメニューの固定位置が必要です。サブメニュー クラスを持つすべての ul が左に開始されるように、どのクラスを祖先として取るかをサブメニューに伝える方法はありますか: 0 は、別の div から、これよりも高くなります。これは、すべての ul クラス サブメニューが異なる場所から開始されるためです (祖先に基づく）

4

1 に答える 1

0

position: relative解決策は、親ulコンテナー ブロックに設定することです。

これにより、絶対配置されたすべての子孫ul.submenu要素の参照点が設定されます。

デモ

HTMLは次のようになります。

<ul class="menu">
    <li><span>Cats</span>
      <ul class="submenu">
      <li>Cat 1</li>
      <li>Cat 2</li>
      <li>Cat 3</li>
      </ul>
    </li>
    <li><span>Dogs</span>
      <ul class="submenu">
      <li>.........Dog 1</li>
      <li>.........Dog 2</li>
      <li>.........Dog 3</li>
      </ul>
    </li>
</ul>

およびレイアウトの基本的なCSS :

.menu {
}
.menu li {
    display: inline-block;
    width: 100px;
    position: relative;
}
.menu li span {
    display: block;
    height: 30px;
    outline: 1px solid blue;
}
.submenu {
    position: absolute;
    top: 30px;
    left: 0;
    outline: 1px dotted gray;
    margin: 0;
    padding: 0;
}

フィドルを参照してください: http://jsfiddle.net/audetwebdesign/6j6Da/

于 2013-08-09T10:21:01.123 に答える