Just wondering if anyone can provide some basic advice on an accordion I'm trying to simplify. Got a working version, but it seems way overly complex. Here is my new JS.

   $(document).ready(function() {
     $("#themes li ul").hide();
     $("#themes li").hover(function() {
       $("ul").show();
         }, function() {
         $("li ul").hide();
   });

The markup looks like this:

<ul>
  <li>Tier 1
    <ul>
      <li>Tier 2</li>
      <li>Tier 2</li>
    </ul>
  </li>
  <li>Tier 1
    <ul>
      <li>Tier 2</li>
      <li>Tier 2</li>
    </ul>
   </li>
</ul>

My script works alright. But it shows all of the child ul's when any parent li is hovered, and it hides all the child ul's when unhovered. Just not sure how I can get it to A.) Only .show the li > ul when that specific li is hovered. And B.) Hide the shown li > ul only when another one is hovered (not itself). Example + explanation would be especially helpful! Thanks!!