停止从上方展开 div 的下拉菜单

Question

各位程序员，

我在将下拉菜单放入应用导航时遇到问题。当我将鼠标拖到我的下拉元素上时，下面的菜单会一起展开，同时展开上面的 div 元素（这是下拉菜单的名称），并将导航菜单中的所有其他项目推到右侧。这是我的代码：

const listItems = links.map((link_name) =>
  <li className="nav-item" key={link_name}>
    <div className="nav-link"><DropDown name={link_name} /></div>
  </li>
);
return (
  <nav className="navbar-light" style={{ backgroundColor: '#333333' }}>
    <div>
      <div className="container-fluid">
        <Link to="/" className="navbar-brand">
          <img alt="dribbble" style={styles.style_img} src={"http://www.underconsideration.com/brandnew/archives/dribbble_logo_detail.png"} />
        </Link>
      <ul className="nav navbar-nav" style={styles.style_l}>
        {listItems}
      </ul>
    </div>
      <ul className="nav navbar-nav" style={styles.style_r}>
        {this.renderLinks()}
        <li className="nav-item" key={10}>
          <input type="search" ref="city" placeholder="Search"/>
        </li>
      </ul>
    </div>
  </nav>
);
const styles = {
 style_r: {
  margin: 10,
  top: 5,
  right: 17,
  bottom: 20,
  left: 'auto',
  position: 'fixed',
 },
 style_l: {
  margin: 5,
  top: 10,
  left: 134,
  bottom: 20,
  position: 'absolute',
 },
 style_img: {
  margin: 5,
  left: 10,
  width: 100,
  height: 42,
 }
 };

下拉菜单定义为：

if(this.state.menuActive) {
  menu = <div>
            <ul className="drop">
              <li>First Item </li>
              <li>Second Item </li>
              <li>Third Item </li>
            </ul>
          </div>
} else {
  menu = "";
}
return (
  <div id = "menu">
    <div id = "dropdown_name" style={{ color: '#F5F5F5' }} onMouseOver = { this.toggleMenu } onMouseLeave = { this.toggleMenu }>{this.props.name}</div>
    <ReactCSSTransitionGroup transitionName = "menu" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
      {menu}
    </ReactCSSTransitionGroup>
  </div>
)

如果我将 style={{ position: absolute }} 放在 div (dropdown_name) 上，在我的导航栏中，每个元素都会碰撞成一个看起来很乱且难以理解的名称...

这是我的 CSS：

    .menu-enter {
      max-height: 0px;
      -webkit-transition: max-height;
      overflow: hidden;
      width: 100%;
    }

    .menu-enter.menu-enter-active {
      height: auto;
      max-height: 100px;
      width: 100%;
    }

    .menu-leave {
      max-height: 100px;
      -webkit-transition: max-height;
      width: 100%;
    }

    .menu-leave.menu-leave-active {
      overflow: hidden;
      max-height: 0px;
      width: 100%;
    }

    ul.drop {
      margin-top: 7px;
      background-color: #333333;
      color: #6D6D6D;
      border: #333333 solid 7px;
      -moz-border-radius: 7px;
      -webkit-border-radius: 7px;
      width: 100%;
      padding-left:0.4em;
      font-size: 12pt;
      list-style-type: none;
    }

如何防止下拉菜单扩展我上面的下拉菜单名称？我希望代表下拉列表名称的 div 保持相同的宽度。

Answer 1

来自MDN：

绝对定位元素是相对于其最近的定位祖先（即最近的非静态祖先）定位的。

保持您在下拉组件上的绝对定位，并在下拉的容器组件 (nav-link) 上放置 position: relative; 样式。这将允许下拉列表相对于它包含的导航链接定位。

当您添加绝对位置时，您对每个元素组合的问题似乎是因为它们都被绝对定位到 body 元素。