position relative to the bottom of parent

Question

I've two menu that show on hover of an icon. I'd like both menu to show on the bottom left of the icon when hovering. However the menu are different sizes and I can't manage to make them be under the other while keeping the same classnames.

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

In other words I'd like the right menu to start under "+ hover here".

Answer 1

Instead of

  bottom:-1rem;

use

  top:1rem;

like this