将菜单项堆叠在左侧而不是底部

Question

我有以下菜单：

我希望它在左侧垂直堆叠：- 类似于（抱歉画得不好）：

HTML代码:-

<div class="dropdown">
   <button class="btn bg-transparent fas fa-ellipsis-v fa-lg">
      <div class="dropContent">
         <a data-tooltip="View Activity" onclick="" class="btn icon-gls-option m-b-10 m-l-5 d-print-none"><i class="fas fa-book-open"><span class=""></span></i></a>
         <a data-tooltip="Edit" onclick="" class="btn icon-gls-option m-b-10 m-l-5 d-print-none"><i class="fas fa-pen-alt fa-md"></i></a>
         <a data-tooltip="New Task" onclick="" class="btn icon-gls-option m-b-10 m-l-5 d-print-none"><i class="fas fa-tasks fa-md"></i></a> +
         <a data-tooltip="Delete" onclick="" class="btn icon-gls-danger m-b-10 m-l-5 d-print-none"><i class="fas fa-trash fa-md"></i></a>
      </div>
   </button>
</div>

CSS代码:-

.dropdown {
    position: relative;
    display: inline-block;
}

.dropContent {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    margin-top: 2px;
    color: black;
}

    .dropContent a {
        display: block;
    }

.dropdown:hover .dropContent {
    display: block;
    z-index: 1
}

Answer 1

希望这可以帮助您入门 - 将鼠标悬停在蓝色上，红色菜单选项出现在左侧。

overlayItem 相对定位所以绝对定位是相对于它

hoverMe 这是蓝色的斑点。将鼠标悬停在其上，下拉菜单显示为 flex 以实现菜单选项行

dropdown 绝对定位并使用变换与 hoverMe 对齐。宽度适合内容，因此弹性行不会占用超过 div

内的内容

.overlayItem {
  position: relative;
  
  margin-left: 400px;
  
  height: 50px;
}

.hoverMe {
  width: 50px;
  height: 100%;
  background-color: blue;
}

.hoverMe:hover + .dropdown {
  display: flex;
}
.dropdown:hover {
  display: flex;
}

.dropdown {
  display: none;
  
  gap: 10px;

  height: 100%;

  position: absolute;
  transform: translate(-100%, -100%);
  
  background-color: red;
  
  width: fit-content;
}

<div class="overlayItem">
  <div class="hoverMe"></div>
  <div class="dropdown">
    <p>item 1</p>
    <p>item 2</p>
    <p>item 3</p>
    <p>item 4</p>
  </div>
</div>

将菜单项堆叠在左侧而不是底部

Stack Menu Items to be on the left instead of bottom

html

css

dropdown