React- Bootstrap выпадающий при наведении

Question

Я работаю над своим первым реагирующим веб-сайтом bootstrap и замечаю, что раскрывающийся список в панели навигации не позволяет выпадать при наведении курсора.

Мне интересно, есть ли обходной путь. Я попытался добавить некоторый код в мой CSS. демо - https://codesandbox.io/s/react-bootstrap-nav-active-link-5v5jq?fontsize=14&hidenavigation=1&theme=dark

/*MENU*/
.dropdown:hover {
  display: block;
}
/*END MENU*/

Однако, это не сработало

Это код.

import React from 'react';
import {Nav, Navbar, NavDropdown } from 'react-bootstrap';
import '../App.css';

function Header() {
    return (
            <Navbar bg="transparent" variant="dark" expand="lg">
            <Navbar.Brand href="#home" className="App-logo">AdStichr</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ml-auto">
                <Nav.Link href="#home">Home</Nav.Link>
                <Nav.Link href="#link">Link</Nav.Link>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown" alignRight>
                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
                </Nav>

            </Navbar.Collapse>
            </Navbar>
    )
}
export default Header;

даже пробовал это

const Header = props => {
    const { location } = props;
    const [isOpen, updateIsOpen] = useState(false);
    return (
        <Navbar bg="transparent" variant="dark" expand="lg">
        <Navbar.Brand href="#home" className="App-logo">AdStichr</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto" activeKey={location.pathname}>
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/advertisers">Advertisers</Nav.Link>
            <NavDropdown title="Publishers" id="basic-nav-dropdown" alignRight
             onMouseOver={() => updateIsOpen(true)}
             onFocus={() => updateIsOpen(true)}
             onMouseLeave={() => updateIsOpen(false)}
             onBlur={() => updateIsOpen(false)}
             toggle={() => updateIsOpen(!isOpen)}
             isOpen={isOpen}>
                <NavDropdown.Item href="/publishers/radio">Radio Stations</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="/publishers/podcasters">Audio Podcasters</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="/publishers/videopodcasters">Video Podcasters</NavDropdown.Item>
            </NavDropdown>
            <Nav.Link href="/case-studies">Case Studies</Nav.Link>
            <Nav.Link href="/contact">Contact</Nav.Link>
            </Nav>

        </Navbar.Collapse>
        </Navbar>
    );
  };
  const HeaderWithRouter = withRouter(Header);
  export default HeaderWithRouter;

Но безуспешно.

Answer 1

Это должно работать:

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}

Answer 2

Добавьте приведенный ниже код к css, проверил в песочнице и работал нормально. Дайте мне знать, если у вас все еще есть проблема.

Проверьте фрагмент песочницы Здесь

.nav-item:hover .dropdown-menu{
  display:block!important
}