title: React-Bootstrap dropdown on hover
body: <p>I am working on my first react-bootstrap website and I am noticing that the dropdown in navbar won't allow dropdown on hover.</p>
  
  <p>I am wondering if there is a workaround. I tried adding some code to my CSS.
  demo - <a href="https://codesandbox.io/s/react-bootstrap-nav-active-link-5v5jq?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="noreferrer">https://codesandbox.io/s/react-bootstrap-nav-active-link-5v5jq?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>
  
  <pre><code>/*MENU*/
  .dropdown:hover {
    display: block;
  }
  /*END MENU*/
  </code></pre>
  
  <p>However, this did not work</p>
  
  <p>This is the code.</p>
  
  <pre><code>import React from 'react';
  import {Nav, Navbar, NavDropdown } from 'react-bootstrap';
  import '../App.css';
  
  function Header() {
      return (
              &lt;Navbar bg="transparent" variant="dark" expand="lg"&gt;
              &lt;Navbar.Brand href="#home" className="App-logo"&gt;AdStichr&lt;/Navbar.Brand&gt;
              &lt;Navbar.Toggle aria-controls="basic-navbar-nav" /&gt;
              &lt;Navbar.Collapse id="basic-navbar-nav"&gt;
                  &lt;Nav className="ml-auto"&gt;
                  &lt;Nav.Link href="#home"&gt;Home&lt;/Nav.Link&gt;
                  &lt;Nav.Link href="#link"&gt;Link&lt;/Nav.Link&gt;
                  &lt;NavDropdown title="Dropdown" id="basic-nav-dropdown" alignRight&gt;
                      &lt;NavDropdown.Item href="#action/3.1"&gt;Action&lt;/NavDropdown.Item&gt;
                      &lt;NavDropdown.Item href="#action/3.2"&gt;Another action&lt;/NavDropdown.Item&gt;
                      &lt;NavDropdown.Item href="#action/3.3"&gt;Something&lt;/NavDropdown.Item&gt;
                      &lt;NavDropdown.Divider /&gt;
                      &lt;NavDropdown.Item href="#action/3.4"&gt;Separated link&lt;/NavDropdown.Item&gt;
                  &lt;/NavDropdown&gt;
                  &lt;/Nav&gt;
  
              &lt;/Navbar.Collapse&gt;
              &lt;/Navbar&gt;
      )
  }
  export default Header;
  </code></pre>
  
  <p>even tried this</p>
  
  <pre><code>const Header = props =&gt; {
      const { location } = props;
      const [isOpen, updateIsOpen] = useState(false);
      return (
          &lt;Navbar bg="transparent" variant="dark" expand="lg"&gt;
          &lt;Navbar.Brand href="#home" className="App-logo"&gt;AdStichr&lt;/Navbar.Brand&gt;
          &lt;Navbar.Toggle aria-controls="basic-navbar-nav" /&gt;
          &lt;Navbar.Collapse id="basic-navbar-nav"&gt;
              &lt;Nav className="ml-auto" activeKey={location.pathname}&gt;
              &lt;Nav.Link href="/"&gt;Home&lt;/Nav.Link&gt;
              &lt;Nav.Link href="/advertisers"&gt;Advertisers&lt;/Nav.Link&gt;
              &lt;NavDropdown title="Publishers" id="basic-nav-dropdown" alignRight
               onMouseOver={() =&gt; updateIsOpen(true)}
               onFocus={() =&gt; updateIsOpen(true)}
               onMouseLeave={() =&gt; updateIsOpen(false)}
               onBlur={() =&gt; updateIsOpen(false)}
               toggle={() =&gt; updateIsOpen(!isOpen)}
               isOpen={isOpen}&gt;
                  &lt;NavDropdown.Item href="/publishers/radio"&gt;Radio Stations&lt;/NavDropdown.Item&gt;
                  &lt;NavDropdown.Divider /&gt;
                  &lt;NavDropdown.Item href="/publishers/podcasters"&gt;Audio Podcasters&lt;/NavDropdown.Item&gt;
                  &lt;NavDropdown.Divider /&gt;
                  &lt;NavDropdown.Item href="/publishers/videopodcasters"&gt;Video Podcasters&lt;/NavDropdown.Item&gt;
              &lt;/NavDropdown&gt;
              &lt;Nav.Link href="/case-studies"&gt;Case Studies&lt;/Nav.Link&gt;
              &lt;Nav.Link href="/contact"&gt;Contact&lt;/Nav.Link&gt;
              &lt;/Nav&gt;
  
          &lt;/Navbar.Collapse&gt;
          &lt;/Navbar&gt;
      );
    };
    const HeaderWithRouter = withRouter(Header);
    export default HeaderWithRouter;
  </code></pre>
  
  <p>But no success.</p>