如何在Bootstrap 4中设置下拉子菜单为dropup/dropleft及左上定位？

数据老陈

2026-8-20

Bootstrap 4 下拉子菜单左上角定位解决方案

问题分析

当前子菜单默认向右下方展开，需调整为从父菜单项的左上角向左展开，对齐父项左上角位置。

实现步骤

1. 调整HTML结构

给包含子菜单的父<li>元素添加position-relative类，确保子菜单定位参考父元素：

<div class="btn-group">
  <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
    Action
  </button>
  <ul class="dropdown-menu">
    <li class="dropleft position-relative">
      <a class="dropdown-item" href="#">
        <i class="fa fa-prescription"></i>
        <span class="inner-menu-fx">Prescription</span>
      </a>
      <ul class="dropdown-menu dropdown-submenu">
        <li>
          <a class="dropdown-item" href="#">Submenu item 1 Submenu item 1</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Submenu item 2 Submenu item 1</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Submenu item 4 Submenu item 1</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Submenu item 5 Submenu item 1</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

2. 添加自定义CSS

覆盖Bootstrap默认样式，实现子菜单左上角对齐：

.dropdown-submenu {
  top: 0 !important;
  left: -100% !important; /* 向左展开，右侧对齐父元素左侧 */
  margin-top: 0 !important;
  margin-left: 0 !important;
}

/* 父菜单项hover时显示子菜单 */
.position-relative:hover > .dropdown-submenu {
  display: block;
}