html - 为所有子菜单添加固定位置和宽度

Question

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

ul 类子菜单是绝对位置，这意味着 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/