title: jQuery autocomplete rows highlight on select
body: <p>I'm using <a href="http://jqueryui.com/demos/autocomplete/">jQuery UI Autocomplete</a>.</p>
  
  <p>When the suggestion box appears and the user presses the Down key (or they move the mouse over one suggestion), I need the entire row to be highlighted. So far, when pressing the Down key, only the background of the hyperlink gets highlighted. I tried styling the ui-state-hover class, but that's only used on the anchor element. I can't figure out how to highlight the li element.</p>
  
  <p>Here's my CSS so far:</p>
  
  <pre><code>.ui-state-hover, .ui-autocomplete li:hover
  {
      color:White;
      background:#96B202;
      outline:none;
  }
  </code></pre>
  
  <p><strong>EDIT:</strong>
  To make it a bit more clear, the autocomplete generates its elements like so:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a&gt;an element&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a&gt;another element&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>when the down key is pressed, the anchor element automatically gets the class ui-state-hover.</p>