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：

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

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

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

停止从上面扩展div的下拉菜单

1 个答案: