Hi there Nhân,
Thanks for contributing to the support board! It's an interesting issue being raised here, and is slightly more tricky than it might seem at first sight. The <DropdownMenu> appears/disappears not by basing directly upon its CSS features, but depends on react-popper for this job. To have a dropdown in a navbar, therefore, you have to make sure several elements are present.
1. a state property:

this.state = {
       ...
       dropdownOpen: false
     };

2. a funtion:

toggle() {
      this.setState({
        dropdownOpen: !this.state.dropdownOpen
    });
  }

3. and finally, a properly configured this.prop object in render():

<Dropdown isOpen={this.state.dropdownOpen} toggle={()=>"anythingYouLike"} onMouseEnter={this.toggle} onMouseLeave={this.toggle}>
...
</Dropdown>

I think it is worth to mention what exactly is happening here. Usualy, the <DropdownMenu> component uses function in the toggle to do it's toggling with a click through toggle="this.toggle" prop. Now, as we want to alter the triggering method, we have to replace the original toggle method (which is required) with a mock function returning a string ("anythingYouLike") and add two event listeners - one for onMouseEnter and second for onMouseLeave event - to fire the toggling function instead. It would be totally reasonable to consider custom functions to explicitly open or close the menu as opposed to simply toggling it, just to be sure.

With Best Regards,
Kuba