title: mouse enter mouse leave help for a big array of info
body: <p>i would like too set a link for every state ,and every city.
   when the state li is hovered over i only want that this states cities to show ....
  but i kno only a little jquery code and im not perfect with understanding the selectors,
  im not to sure on how to use the .each jquery function.... please help!!!!
  php code:</p>
  
  <pre><code>&lt;?
  $everything = array(
          'states'=&gt;array(
              'Alabama'=&gt;array('Birmingham,Montgomery,Mobile,Huntsville,Tuscaloosa'),
              'Alaska'=&gt;array('Anchorage,Juneau,Fairbanks,Sitka,Ketchikan'),
              'Arizona'=&gt;array('Phoenix,Tuscon,Mesa,Glendale,Scottsdale'),
              'Arkansas'=&gt;array('Little Rock,Fort Smith,North Little Rock,Fayetteville,Jonesboro'),
  
          )
  );
  $id = md5(0);
  $controll = 0;
  $here = md5('states');
  echo "&lt;div id=\"9090\"&gt;&lt;ol id=\"selectable\"&gt;";
      foreach($everything['states'] as $state=&gt;$city){
      $citys = explode(',',$city[0]);
      echo    "&lt;li class=\"ui-state-default\"&gt;&lt;a class=\"contr\" href=\"#\"&gt;$state&lt;/a&gt; &lt;div class=\"citys\"&gt;";
          foreach($citys as $key=&gt;$x){
              echo "&lt;a href=\"#\"&gt;$x&lt;/a&gt;&lt;br&gt;";    
          }
      "&lt;/div&gt;&lt;/li&gt;";
      }
  
  echo "&lt;/ol&gt;&lt;/div&gt;";
  ?&gt;
  </code></pre>
  
  <p>jquery :</p>
  
  <pre><code>    &lt;script&gt;
  
          $(function() {
              $( "#selectable" ).selectable();
          });
          $('.ui-state-default').mouseenter(function(e) {
  // here when i hover over this state all citys show i just want the cities for this sate
              $('.citys').toggle();
          }).mouseleave(function(e) {
  // here when i leave  this state li all theese citites should leave
              $('.citys').toggle();
          });;
  
      &lt;/script&gt;
  </code></pre>