title: :hover stops after hovering autocomplete field
body: <p>I never was a big fan of javascript dropdowns, so when I can style a dropdown using CSS I will. But now Im running into a small problem.</p>
  
  <p>I have a login button, and a small login form module, which is a sibling of the button. When I hover over the button, the login form shows up directly under it (By setting <code>display:block</code> on his brother) and you can go to the form where the hover over the form takes over so the form module doesnt disappear again.</p>
  
  <p>It's all pretty easy:</p>
  
  <pre><code>#home-login-button:hover + #login, #login:hover {
      display: block;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/6NeTG/" rel="noreferrer">A JSFiddle can be found here</a></p>
  
  <p>The problem I have is that when I type in a letter, my browser wants to autocomplete. If I for example type "h" it drops down "Hans Wassink". But when I hover that autocomplete box the whole thing pops like a bubble. Im no longer hovering the login module so it disappears. Very Annoying. Is there anything I can do? I know I can set autocomplete to 'off' but I want my users to have that option.</p>
  
  <p>I noticed it also happens when I use the same solution but with jQuery.</p>
  
  <p>EDIT: To complete the question. Im on FF28 / Windows. But My colleagues here have it too on other versions of FF and on IE (The receptionist, the rest has real browsers :) ).</p>