title: jquery submenu hide/show with submenu in separate div
body: <p>how can I hide/show a submenu on hover, which is not inside the original trigger?</p>
  
  <p>I have the following code: </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="toggleTrigger" id="subMenu"&gt;&lt;a href="#"&gt;header&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="subMenu"&gt;
    &lt;p&gt;hello!&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>function configFile() {
  $('.toggleTrigger').hover(function () {
    var trigger = $(this).attr('id');
         target = '.'+trigger;
   $( target ).show();    
   }, function () {
       $( target ).hide();                
       });    
  }
  </code></pre>
  
  <p>The hide/show is working. The only problem is once I hover away from the trigger, my subMenu is also hidden, so I cannot click anything on the submenu.</p>
  
  <p>I don't want to put the submenu inside the list item because it messes up my CSS. Is there a way to still enable me to hover from trigger to submenu and only when I leave both, the submenu gets hidden? </p>
  
  <p>Thanks for help! </p>