CODEWITHSUNDEEP
htmlcssposition
Ced
Ced

Reputation: 17337

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".

Upvotes: 1

Views: 534

Answers (2)

&#199;ağatay Uslu
&#199;ağatay Uslu

Reputation: 52

another solution is, move bottom:-1 propery from .menu to .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;
    }

Upvotes: 0

Berrie Trippe
Berrie Trippe

Reputation: 193

Instead of 

  bottom:-1rem;

use

  top:1rem;

like this

Upvotes: 2

Related Questions