相对于父级底部的位置

Question

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

的jsfiddle

<!-- 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;

像这样

Answer 2

另一个解决方案是，将底部：-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;
    }