求助：如何将导航栏的Drop Down子菜单调整为指定样式？

我正在开发带下拉子菜单的导航栏，当前使用的代码如下：

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">lorem ....</a></li>
  <li><a class="dropdown-item" href="#">lorem ....</a></li>
  <li><a class="dropdown-item" href="#">lorem ....</a></li
</ul>

当前下拉菜单效果：

希望调整为如下样式的下拉菜单：

请提供相关技术解决方案。

1. 先修正HTML语法错误 #

你代码里最后一个<li>标签未闭合，补上>，避免渲染异常。

2. 扩展HTML结构（匹配目标样式的分组/分隔线） #

从目标图来看，菜单包含分组标题、分隔线、常规菜单项，可以利用Bootstrap的内置组件类实现（你当前用的dropdown-menu/dropdown-item属于Bootstrap类，默认支持这些扩展）：

<ul class="dropdown-menu custom-dropdown">
  <!-- 分组标题 -->
  <li>
    <h6 class="dropdown-header">菜单分组标题</h6>
  </li>
  <!-- 分隔线 -->
  <li>
    <hr class="dropdown-divider">
  </li>
  <!-- 常规菜单项 -->
  <li><a class="dropdown-item" href="#">lorem ....</a></li>
  <li><a class="dropdown-item" href="#">lorem ....</a></li>
  <li><a class="dropdown-item" href="#">lorem ....</a></li>
  <!-- 可选：带右侧箭头的菜单项（如果目标样式包含这类项） -->
  <li>
    <a class="dropdown-item d-flex justify-content-between align-items-center" href="#">
      更多选项
      <span>→</span>
    </a>
  </li>
</ul>

3. 自定义CSS优化样式（对齐目标视觉效果） #

添加以下CSS来调整菜单的宽度、阴影、标题背景等细节：

.custom-dropdown {
  /* 调整菜单最小宽度，按需修改 */
  min-width: 220px;
  /* 增强阴影提升层次感 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  /* 调整圆角，匹配目标样式 */
  border-radius: 4px;
  border: 1px solid #eee;
}

.custom-dropdown .dropdown-header {
  /* 标题背景色，对应目标图的灰色头部 */
  background-color: #f5f5f5;
  padding: 8px 16px;
  font-weight: 600;
  color: #555;
  margin: 0;
}

.custom-dropdown .dropdown-divider {
  /* 缩小分隔线上下间距 */
  margin: 4px 0;
  border-top-color: #eee;
}

.custom-dropdown .dropdown-item {
  /* 调整菜单项内边距，让排版更宽松 */
  padding: 9px 16px;
}

.custom-dropdown .dropdown-item:hover {
  /* 自定义hover背景色 */
  background-color: #f0f0f0;
}

说明 #

• 如果你用的是Bootstrap 4，把d-flex justify-content-between替换为float-right实现箭头居右；Bootstrap 5+可以直接使用上述flex类。
• 颜色、尺寸参数可以根据实际需求修改，完全匹配你的目标设计。

内容的提问来源于stack exchange，提问作者khodidas patel