title: Css and Autocomplete
body: <p>I am using the autocomplete plugin in one of my applications the Autocomplete div that is being created by the autocomplete plugin has property <code>Position: Absolute;</code>. I have a drop down div in my navigation menu where i have an input field which triggers the auto complete function. Everything works fine except for when i hover over the autocomplete div. As soon as i hover on the autocomplete div the dropdown div dissappears cuz it is being shown by the following css :</p>
  
  <pre class="lang-css prettyprint-override"><code>#nav li:hover &gt; .subnav{
    display: block;
  }
  
  #nav .subnav {
    position:absolute;
    background:#fff;
    padding:10px;
    padding-right:15px;
    text-align:left;
    width:180px;
    border:1px solid #ccc;
    border-top:none;
    z-index:1200;
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    display:none;
    margin:6px -1px;
  }
  </code></pre>
  
  <p>Here <code>#nav</code> is the ul that contains the navigation links and <code>.subnav</code> is the dropdown div.
  i dont want .subnav div to dissappear once a user hovers over the autocomplete div to select an entry.</p>