代码之家 › 专栏 › 技术社区 › Blackbam

CSS弹出菜单中的绝对/相对定位:如何仅使用部分父属性(左、上、宽、垂直/水平对齐)?

css-position alignment css3 html5 css

0

Blackbam · 技术社区 · 6 年前

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

但是因为 position:relative; 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的答案将不被接受)?

1 回复 | 直到 6 年前

1

2

Temani Afif 6 年前

使菜单项相对于 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>