title: Reactjs Dropdown Menu not showing
body: <p>I'm creating with reactjs Navbar which should include an dropdown menu component. I took the example from react bootstrap.</p>
  
  <pre><code> import React from 'react';
  import {NavDropdown} from 'react-bootstrap'
  
  export default function Dropdown() {
    return (
      &lt;&gt;
      &lt;div className="dropdown-style"&gt;
       &lt;NavDropdown title="Dropdown" id="collasible-nav-dropdown"&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;/div&gt;
      &lt;/&gt;
    )
  }
  </code></pre>
  
  <p>But when I run this code the dropdown menu does not open in the front. 
  But the dev-mode shows me that it's actually opening.</p>
  
  <p>The dropdown menu is only showing when I'm including this css-style</p>
  
  <pre><code>.dropdown-style{
    position: absolute; 
  </code></pre>
  
  <p>But when I shrink the window then this component tears up the whole navbar when I merge it to the burger menu</p>
  
  <p>I tried </p>
  
  <pre><code>{ .z-index: 999 }
  </code></pre>
  
  <p>But this didn't work.</p>
  
  <p>Here is the navigation component</p>
  
  <pre><code>export default class Navbar extends Component {
    state = {
      isOpen: false
    };
    handleToggle = () =&gt; {
      this.setState({ isOpen: !this.state.isOpen });
    };
    render() {
      return (
        &lt;nav className="navbar"&gt;
          &lt;div className="nac-center"&gt;
            &lt;div className="nav-header"&gt;
              &lt;Link to="/"&gt;
                &lt;img src={logo} alt="foo" id="foo" /&gt;
              &lt;/Link&gt;
              &lt;button
                type="button"
                className="nav-btn"
                onClick={this.handleToggle}
              &gt;
                &lt;FaAlignRight className="nav-icon" /&gt;
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;div className="ul-width nav-font"&gt;
              &lt;ul
                className={this.state.isOpen ? "nav-links show-nav" : "nav-links nav-terms"}
              &gt;
                &lt;li className="navbar-top"&gt;
                  &lt;Link to="/support"
                    onClick={(this.state.isOpen) ? this.handleToggle : null}&gt;
                    Support
                      &lt;/Link&gt;
                &lt;/li&gt;
                &lt;li className="navbar-top"&gt;
                  &lt;Link to="/aboutus"
                    onClick={(this.state.isOpen) ? this.handleToggle : null}&gt;
                    &lt;nobr&gt;About Us&lt;/nobr&gt;
                  &lt;/Link&gt;
                &lt;/li&gt;
                &lt;li className="navbar-top"&gt;
                  &lt;Link to="/foo"
                    onClick={(this.state.isOpen) ? this.handleToggle : null}&gt;
                    foo
                    &lt;/Link&gt;
                &lt;/li&gt;
                &lt;li className="navbar-top"&gt;
                  &lt;Dropdown/&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      );
    }
  }
  </code></pre>