jQuery IE expand hoverable area

I have a piece of code that I am working with where changing the structure is not really an option. I have a div-based dropdown menu, basically looks like this:

<div id="menugroup">
    <div id="menuheader1">header</di开发者_开发问答v>
    <div id="menuitems">
        <div>menuitem1</div>
        <div>menuitem1</div>
        <div>menuitem1</div>
        <div>menuitem1</div>
    </div>
</div>

menuitems is display:none by default. I have attached a jQuery hover event to menugroup, such that when you hover over the div, menuitems becomes display:block, and when you stop hovering menuitems becomes display:none.

This works great in firefox, but I am having problems in IE. As soon as my mouse leaves the physical area of menuheader1 (all that was originally visible of menugroup), it triggers the mouseout, even though my mouse is still hovering over stuff in menuitems, which is now part of menugroup.

Without changing the physical structure, how do I make the jQuery hover area expand with the contents of menugroup?

---

Live demo with http://jsfiddle.net would be great however this is a common problem. Something like hoverIntent is a great option for mouse sensitivity issues and user error. jQuery's default hover function is less than ideal in the case of dropdown menus.