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

【问题标题】：Stack Menu Items to be on the left instead of bottom将菜单项堆叠在左侧而不是底部
【发布时间】：2021-03-02 17:54:42
【问题描述】：

我有以下菜单：

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

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
}

【问题讨论】：

试试这个.dropdown:hover .dropContent { display: flex; right: 100%; z-index: 1 }
@Vlad 什么都不做 :(

标签： html css dropdown

【解决方案1】：

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

overlayItem 相对定位，因此绝对定位与其相关

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

dropdown 绝对定位并使用变换与hoverMe 保持一致。宽度是适合内容的，因此 flex 行占用的内容不会超过 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>

【讨论】：