html - 您如何定位菜单以从其父级的末尾开始转换？

Question

我在位于此链接底部的链接中有一个菜单，其中position: absolute. 我使用translateY规则是因为链接在不同的屏幕上具有不同的高度，但是我使用动画并且translateY在发生转换时它会覆盖规则。

nav {
  text-align: right
}

.dropdown,
.trigger,
.menu {
  display: inline-block;
}

.dropdown {
  position: relative;
}

.trigger {
  background: yellow
}

.menu {
  opacity: 0;
  background: orange;
  bottom: 0;
  right: 0;
  transform: translateY(100%);
  height: 50px; /* The height is variable*/
  position: absolute;
}

.trigger:focus + .menu{
   opacity: 1;
   animation: toogle-show-menu 0.25s;
}

@keyframes toogle-show-menu {
  0% {
    transform: scale(0.95);
    transform-origin: 100% 0;
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

<nav>
  <div class="dropdown">
    <button class="trigger">
      LINK MENU
    </button>

    <div class="menu">
      menu
    </div>
  </div>
</nav>

否则，我想知道是否有另一种 html 结构可以更轻松地处理这个问题。

标签： htmlcss

Answer 1

利用top:100%

nav {
  text-align: right
}

.dropdown,
.trigger,
.menu {
  display: inline-block;
}

.dropdown {
  position: relative;
}

.trigger {
  background: yellow
}

.menu {
  background: orange;
  top:100%;
  right: 0;
  height: 50px; /* The height is variable*/
  position: absolute;
}

<nav>
  <div class="dropdown">
    <div class="trigger">
      LINK MENU
    </div>

    <div class="menu">
      menu
    </div>
  </div>
</nav>