CSS absolute/relative 在弹出菜单中的定位：如何只使用父项的部分属性（左、上、宽、vertical/horizontal 对齐方式）？

Question

这是我最近在 CSS 中经常遇到的问题。假设我们在页面某处有一个弹出菜单，其中包含列表项。这些列表项具有悬停时显示的子菜单。因为我希望子菜单出现在父列表项的正下方，所以我将 position:relative; 分配给父项，将 position:absolute;top:0; 分配给子菜单。到目前为止效果很好。

但是，由于 position:relative;，现在我无法将子菜单设置为页面宽度的 100%，也无法使用 left:0;，因为子菜单向左对齐 页面的不是父元素的。

我想要的是以某种方式在父级上有 position:relative; 用于垂直对齐，但是 position:inherit; 关于水平对齐。

参见以下示例 - 子菜单在垂直方向上正确对齐，但在水平方向上应从最左边开始：

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

#my-menu-inner > ul {
  width:100%;
  background-color:yellow;
  list-style-type:none;
}

#my-menu-inner > ul > li {
  float:left;
  position:relative;
  padding:20px;
  border:1px solid black;
  margin:20px;
}

#my-menu-inner > ul > li > div.sub {
   position:absolute;
   top:60px;
   background-color:red;
   padding:40px;
   display:none;
   left:0;
   width:100vw;
}

#my-menu-inner > ul > li:hover > div.sub, #my-menu-inner > ul > li:focus > div.sub {
    display:block;
}

<div id="whatever">Just something before ...</div>
<div id="my-menu">
  <div id="my-menu-inner">
    <ul class="clearfix">
      <li>
        <span>foo</span>
        <div class="sub">
          <ul>
            <li>hello</li>
            <li>world</li>
          </ul>
        </div>
      </li>
      <li>
        <span>foo</span>
        <div class="sub">
          <ul>
            <li>please</li>
            <li>alignme</li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

怎样才能达到我想要的效果（请纯CSS，涉及JS的回答恕不接受）？

Answer 1

使菜单项相对于 ul 而不是 li:

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

#my-menu-inner > ul {
  margin:10px;
  width:100%;
  background-color:yellow;
  list-style-type:none;
  position:relative;
}

#my-menu-inner > ul > li {
  float:left;
  padding:20px;
  border:1px solid black;
  margin:20px;
}

#my-menu-inner > ul > li > div.sub {
   position:absolute;
   top:calc(100%  - 20px);
   background-color:red;
   padding:40px;
   display:none;
   left:0;
   width:100vw;
}

#my-menu-inner > ul > li:hover > div.sub, #my-menu-inner > ul > li:focus > div.sub {
    display:block;
}

<div id="whatever">Just something before ...</div>
<div id="my-menu">
  <div id="my-menu-inner">
    <ul class="clearfix">
      <li>
        <span>foo</span>
        <div class="sub">
          <ul>
            <li>hello</li>
            <li>world</li>
          </ul>
        </div>
      </li>
      <li>
        <span>foo</span>
        <div class="sub">
          <ul>
            <li>please</li>
            <li>alignme</li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

CSS absolute/relative 在弹出菜单中的定位：如何只使用父项的部分属性（左、上、宽、vertical/horizontal 对齐方式）？

CSS absolute/relative positioning in flyout menu: How to use only part of parents' properties (left,top,width,vertical/horizontal alignment)?

html

css

css-position

alignment