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

换句话说，我喜欢在＆＃34; +悬停在这里＆＃34;开始的正确菜单。

Answer 1

而不是

  bottom:-1rem;

使用

  top:1rem;

喜欢this

Answer 2

另一个解决方案是，移动底部：-1从.menu到.item

 return back()->with('msg', $msg)->with('msg_type', $msg_type);

相对于父母底部的位置

2 个答案: