Ced Ced - 1 year ago 55
HTML Question

position relative to the bottom of parent

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

Instead of

  bottom:-1rem;

use

  top:1rem;

like this