title: Autocomplete dropdown of a text input box stays after the input is hidden with CSS
body: <p>I use CSS <code>left: 9999em;</code> to hide a <code>&lt;div&gt;</code> and <code>left: 0em</code> to show it on hover.</p>
  
  <p>The <code>div</code> contains a text input box. If the input box has an open autocomplete dropdown when I hide the <code>div</code> by removing the mouse, the autocomplete box still stays on the page.</p>
  
  <p>How can I hide that one, too? CSS solution is preferable. (I think I know how to do it with jQuery.) I do <em>not</em> want to disable autocomplete for this box, I just want it to be gone when the box itself is gone.</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/ou5cgzpv/" rel="nofollow noreferrer">http://jsfiddle.net/ou5cgzpv/</a></p>
  
  <p>After double-click:</p>
  
  <p><img src="https://i.stack.imgur.com/2Yzfs.png" alt="enter image description here"></p>
  
  <p>After removing the mouse:</p>
  
  <p><img src="https://i.stack.imgur.com/wFZ5J.png" alt="enter image description here"></p>