鼠标上的 Reactstrap 自动下拉菜单

Question

I am trying to implement a sliding dropdown menu using reactstarap, but couldn't find any supporting document or code. Bellow is my sample menu and what I am trying to achieve is an auto sliding dropdown menu on mouse hover action.

 <div>
  <Nav navbar>
    <NavItem>
      <Link className="nav-link" to="/">Home</Link>
    </NavItem>

    <ButtonDropdown nav inNavbar isOpen={dropIsOpen} onClick={handleDropdown}>
      <DropdownToggle nav caret className="nav-link dropdown-toggle">Services</DropdownToggle>
      <DropdownMenu className="dropdown-menu">
        <DropdownItem>
          <Link className="dropdown-item" to="/services/service1">Service1</Link>
        </DropdownItem>
        <DropdownItem>
          <Link className="dropdown-item" to="/services/service2">Service2</Link>
        </DropdownItem>
        <DropdownItem>
          <Link className="dropdown-item" to="/services/service3">Service3</Link>
        </DropdownItem>
        <DropdownItem>
          <Link className="dropdown-item" to="/services/service4">Service4</Link>
        </DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>

    <NavItem>
      <Link className="nav-link" activeClassName="active" to="/our-products">Products</Link>
    </NavItem>

    <NavItem>
      <Link className="nav-link" activeClassName="active" to="/our-clients">Clients</Link>
    </NavItem>

    <NavItem>
      <Link className="nav-link" activeClassName="active" to="/about-us">About Us</Link>
    </NavItem>

    <NavItem>
      <Link className="nav-link" activeClassName="active" to="/contact-us">Contact Us</Link>
    </NavItem>

  </Nav>
</div>

This dropdown only works with a mouse click, and there are no built-in methods available with reactstrap to achieve it on the mouse hover, is there a way to achieve this using pure CSS?

Answer 1

Of course you can use CSS, but it's possible to do it on React by using Synthetic Events:

https://reactjs.org/docs/events.html#mouse-events

You do not only have onClick events, you have the following list available:

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

---

For your case use:

onMouseOver

    <ButtonDropdown nav inNavbar isOpen={dropIsOpen} onMouseOver={handleDropdown}>

An example on W3C web of onmouseover events.