title: Create Hover Meaga menu - click somewhere else
body: <p>I know stackoverflow have some topics about that , but my codes is different with them.</p>
  
  <p>I want to do this work</p>
  
  <ul>
  <li>if I click search Box ( that site that's white square ) open my search-box </li>
  <li>if I open search box , and Click some were else, my search box closed </li>
  </ul>
  
  <p>But my search box is not opening. Here you can find my code.</p>
  
  <pre><code>code
  </code></pre>
  
  <p>You can find my <a href="https://jsfiddle.net/farzdev/jrn1Lx2c/1/" rel="nofollow">fiddle</a>.</p>