相对于父级底部的位置

Question

我有两个悬停在图标上的菜单。我希望这两个菜单在悬停时都显示在图标的左下方。但是菜单大小不同，我无法在保持相同类名的情况下将它们放在另一个下面。

<!-- one item menu-->
<div class="container" style="margin-top:10rem;margin-left:3rem;">
  <div class="icon">
  + hover here
  </div>
  <div class="menu">
    <div class="menuItem">
     item
    </div>
  </div>
</div>
<!-- multiple items menu-->
<div class="container" style="margin-top:10rem;margin-left:6rem;">
  <div class="icon">
  + hover here
  </div>
  <div class="menu">
    <div class="menuItem">
     item
    </div>
        <div class="menuItem">
     item
    </div>
        <div class="menuItem">
     item
    </div>
  </div>
</div>

.container{
  position:relative;
  display:inline-block;
}
.menu{
  position:absolute;
  bottom:-1rem;
  right:5rem;
  opacity:0;
  color:white;
  background:grey;
  display:inline-block;
  cursor:default;
}
.icon:hover + div{
  opacity:1;
}
.item{
    cursor:default;
}

换句话说，我希望右侧菜单在“+ 悬停此处”下启动。

Answer 1

而不是

  bottom:-1rem;

使用

  top:1rem;

喜欢this

Answer 2

另一个解决方案是，将 bottom:-1 属性从 .menu 移动到 .item

.container{
      position:relative;
      display:inline-block;
    }
    .menu{
      position:absolute;
      right:5rem;
      opacity:0;
      color:white;
      background:grey;
      display:inline-block;
      cursor:default;
    }
    .icon:hover + div{
      opacity:1;
    }
    .item{
        cursor:default;
        bottom:-1rem;
    }

相对于父级底部的位置

position relative to the bottom of parent

html

css

position