定位在 CSS，我需要下拉选项居中但向左缩进

Question

HTML 以下需要合适的 CSS 下拉链接居中但缩进。查看 fiddle。 https://jsfiddle.net/peteraejnrdev/865h2tvu/2/#&togetherjs=d3VifH4hc3

<div class="header-dropdown-menu">
      <ul class="top-nav">
          <li class="top-menu-nav"><a href="#">Menu</a>
            <ul class="sub-nav">
              <li><a href="#">wood Type</a></li>
              <li><a href="#">News</a></li>
              <li><a href="#">Specification</a></li>
              <li><a href="#">Pricing</a></li>
              <li><a href="#">Images</a></li>
              <li><a href="#">FAQ</a></li>
            </ul>
          </li>
        </ul>
      </div>

Answer 1

这可以使用位置属性 -

来完成

将父元素设置为相对位置（这会为子元素创建容器）将子元素位置设置为绝对位置。您现在可以使用 top/left/bottom/right 属性指定要放置元素的位置 - 请记住，默认情况下，元素的中心点将放置在左上角 - 这意味着您需要通过以下方式转换元素-50%（顶部和左侧）将它们居中 - 以下示例：

li.top-menu-nav {
    position: relative;
    width: 100%;
}

ul.sub-nav {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

请记住，如果您想将需要添加的 LI 居中 -

ul.sub-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
}

另外请注意，子元素（在本例中为 li）可以移动到的高度将取决于父元素的高度，给你的 top-menu-nav 一个 height:100vh 将允许菜单放置在页面的中央。

希望这对您有所帮助，沃利

Answer 2

如果我的解释是正确的，你可以这样做：

.header-dropdown-menu {
  position: relative;
  display: inline-block;
}

.sub-nav {
  display: none;
  text-align: center;
  position: absolute;
  min-width: 8rem;
  box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.2);
  padding: 1rem 1.5rem;
  z-index: 1;
}

.sub-nav {
  padding-left: 5rem;
}

.top-menu-nav:hover .sub-nav {
  display: block;
}

<div class="header-dropdown-menu">
  <ul class="top-nav">
    <li class="top-menu-nav"><a href="#">Menu</a>
      <ul class="sub-nav">
        <li><a href="#">wood Type</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Specification</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Images</a></li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </li>
  </ul>
</div>

定位在 CSS，我需要下拉选项居中但向左缩进

Positioning in CSS,I need the drop down options central but indented left

html

css

positioning

alignment

dropdown