jquery submenu hide/show with submenu in separate div

how can I hide/show a submenu on hover, 开发者_如何转开发which is not inside the original trigger?

I have the following code:

HTML

<ul>
  <li class="toggleTrigger" id="subMenu"><a href="#">header</a></li>
</ul>

<div class="subMenu">
  <p>hello!</p>
</div>

Javascript

function configFile() {
$('.toggleTrigger').hover(function () {
  var trigger = $(this).attr('id');
       target = '.'+trigger;
 $( target ).show();    
 }, function () {
     $( target ).hide();                
     });    
}

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.

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?

Thanks for help!

Try using a nested ul-list to do it.