title: How to make my JQuery code work properly for multiple ID's
body: <p>I have the following code to show and hide menu items on hover:</p>
  
  <pre><code>jQuery( "#menu-item-11215" ).hover(
      function() {
          jQuery('#menu-item-11215 .sub-menu').show();
      },
      function() {
          jQuery('#menu-item-11215 .sub-menu').hide();
      }
  );
  
  jQuery( "#menu-item-11233" ).hover(
      function() {
          jQuery('#menu-item-11233 .sub-menu').show();
      },
      function() {
          jQuery('#menu-item-11233 .sub-menu').hide();
      }
  );
  
  jQuery( "#menu-item-11211" ).hover(
      function() {
          jQuery('#menu-item-11211 .sub-menu').show();
      },
      function() {
          jQuery('#menu-item-11211 .sub-menu').hide();
      }
  );
  
  jQuery( "#menu-item-11268" ).hover(
      function() {
          jQuery('#menu-item-11268 .sub-menu').show();
      },
      function() {
          jQuery('#menu-item-11268 .sub-menu').hide();
      }
  );
  
  jQuery( "#menu-item-11243" ).hover(
      function() {
          jQuery('#menu-item-11243 .sub-menu').show();
      },
      function() {
          jQuery('#menu-item-11243 .sub-menu').hide();
      }
  );
  
  jQuery( "#menu-item-11239" ).hover(
      function() {
          jQuery('#menu-item-11239 .sub-menu').show();
      },
      function() {
          jQuery('#menu-item-11239 .sub-menu').hide();
      }
  );
  </code></pre>
  
  <p>Rather than repeat the same code over and over, is there a way to trigger the JQuery to work for any of the IDs that have a child ? Here is the relevant HTML code for just one of these. They are all set up the same way:</p>
  
  <pre><code>&lt;ul class="fusion-megamenu fusion-megamenu-row-2 fusion-megamenu-row-columns-1 fusion-megamenu-border"&gt;
      &lt;li id="menu-item-11215" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-11215 fusion-megamenu-submenu fusion-megamenu-columns-1 col-lg-12 col-md-12 col-sm-12"&gt;
          &lt;h3 class='fusion-megamenu-title'&gt;
              &lt;a href="http://someurl"&gt;Families &amp;#038; Individuals&lt;/a&gt;
          &lt;/h3&gt;
  
          &lt;ul class="sub-menu"&gt;
              &lt;li id="menu-item-11275" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11275"&gt;
                  &lt;a href="http://someurl"&gt;
                      &lt;span class="fusion-megamenu-bullet"&gt;&lt;/span&gt;Tax &amp;#038; Advisory
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-11277" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11277"&gt;
                  &lt;a href="http://someurl"&gt;
                      &lt;span class="fusion-megamenu-bullet"&gt;&lt;/span&gt;Trust &amp;#038; Estates
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Knowing that the parent of each child has an ID and I can select the child to show and hide using this code:</p>
  
  <pre><code>jQuery('#menu-item-11211 .sub-menu')
  </code></pre>
  
  <p>How can I make this more generic to save lines of code?</p>