Question

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

ul class子菜单是绝对位置，这意味着left：0从他的祖先开始，但我希望每个菜单的所有ul子菜单都有一个固定的位置。有没有办法告诉子菜单哪个类作为其祖先，以便所有带子菜单类的ul将从左开始：0来自另一个div高于所有这一点，因为现在每个ul类子菜单从不同的地方开始（基于他们的祖先）

Answer 1

解决方案可能是将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/

将固定位置和宽度添加到所有子菜单

1 个答案:

演示