title: Dropdown menu - disappear after clicking on item
body: <p>I'm trying to create &quot;dropdown menu&quot; in React. I've used <code>useState</code> inside functions in <code>onMouseEnter</code> and <code>onMouseLeave</code> events (in <em>dropdown-holder-us</em> <code>div</code> / <strong>NaviMain</strong>), to toggle <code>display</code> of &quot;dropdown menu&quot;. Last thing is to make &quot;dropdown menu&quot; disappear , when clicking on <strong>DropdownMenuItem</strong>. Could someone hint me how to achieve this?</p>
  <p><strong>App.js</strong></p>
  <pre><code>import { BrowserRouter as Router, Routes, Route } from &quot;react-router-dom&quot;;
  import NaviMain from &quot;./components/NaviMain&quot;;
  import Info from &quot;./pages/Info&quot;;
  import VerticalAlign from &quot;./pages/VerticalAlign&quot;;
  import Flexbox from &quot;./pages/Flexbox&quot;;
  
  function App() {
    return (
      &lt;Router&gt;
          &lt;div className=&quot;App&quot;&gt;
            &lt;NaviMain /&gt;
            &lt;Routes&gt;
              &lt;Route path=&quot;/&quot; element={&lt;Info /&gt;} /&gt;
              &lt;Route path=&quot;/verticalalign&quot; element={&lt;VerticalAlign /&gt;} /&gt;
              &lt;Route path=&quot;/flexbox&quot; element={&lt;Flexbox/&gt;} /&gt;
            &lt;/Routes&gt;      
          &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>NaviMain.js</strong></p>
  <pre><code>import { useState } from &quot;react&quot;
  import DropdownMenuItem from &quot;./sub-components/DropdownMenuItem&quot;
  
  const NaviMain = () =&gt; {
  
      const [disp, setDisp] = useState(&quot;hide-menu&quot;);
  
      const hoverOn = () =&gt; {
          setDisp(&quot;show-menu&quot;)
      }
  
      const hoverOff = () =&gt; {
          setDisp(&quot;hide-menu&quot;)
      }
  
    return (
      &lt;nav&gt;
          &lt;ul&quot;&gt;
  
              &lt;li onMouseEnter={hoverOn} onMouseLeave={hoverOff}&gt;
                  &lt;a className=&quot;hover-pointer&quot;&gt;school&lt;/a&gt;
                  &lt;div className={`dropdown-holder-us ${disp}`}&gt;
  
                      &lt;DropdownMenuItem title=&quot;v align&quot; link={&quot;/verticalAlign&quot;}/&gt;
                      &lt;DropdownMenuItem title=&quot;flexbox&quot; link={&quot;/flexbox&quot;} /&gt;
  
                  &lt;/div&gt;
              &lt;/li&gt;           
          &lt;/ul&gt;    
      &lt;/nav&gt;
    )
  }
  export default NaviMain
  </code></pre>
  <p><strong>DropdownMenuItem.js</strong></p>
  <pre><code>import { Link } from &quot;react-router-dom&quot;;
      
  const DropdownMenuItem = ({title , link}) =&gt; {    
  
    return (
      &lt;&gt;
        &lt;Link to={link}&quot;&gt;
          {title}
        &lt;/Link&gt;   
      &lt;/&gt;   
    )
  }
  export default DropdownMenuItem
  </code></pre>