React Bootstrap下拉菜单hover展示异常 如何调整为列表样式

导致下拉菜单展示异常的核心是自定义CSS的错误配置：

• .dropMenu的内边距设置为padding: 112px 160px，超大的上下左右空白直接把菜单选项挤压到了异常位置
• .dropMenu设置display: inline-block，无法让内部的选项元素纵向堆叠为列表
• 自定义的显示逻辑和React-Bootstrap下拉组件自带的内置样式存在冲突

方案1：修改自定义CSS #

调整错误的样式属性即可恢复正常展示：

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

.dropMenu {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  /* 替换超大内边距为合理值 */
  padding: 8px 0;
  z-index: 1;
  height: auto;
  display: none;
}

.drop:hover .dropMenu {
  /* 改用block保证子元素纵向排列 */
  display: block;
}

方案2：使用React-Bootstrap原生能力 #

如果不需要自定义样式，直接移除所有自定义CSS，给Dropdown组件添加hover属性即可原生支持悬浮触发，自带样式会保证下拉列表正常排列：

<Dropdown className="drop" hover>
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    Dropdown Button
  </Dropdown.Toggle>
  <Dropdown.Menu className="dropMenu">
    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

内容的提问来源于stack exchange，提问作者Code With Banchi