JQuery HoverIntent สำหรับเนื้อหาเมนูที่ไม่ซ้อนกัน

ฉันใช้ JQuery HoverIntent เพื่อสร้างเมนู

นี่คือโครงสร้างพื้นฐานของโค้ด HTML ของฉัน:

<ul>
    <li><a href="/th#" class="current">Home</a></li>
    <li id="sh-zone-menu-sub-services" class="submenu"><a href="/th#">Services</a></li>
    <li id="sh-zone-menu-sub-support" class="submenu"><a href="/th#">Support</a></li>
    <li id="sh-zone-menu-sub-contact" class="submenu"><a href="/th#">Contact</a></li>
    <li><a href="/th#">About Us</a></li>
</ul>
<div id="sh-zone-menu-sub-services-target" class="submenu-content">Services Content</div>
<div id="sh-zone-menu-sub-support-target" class="submenu-content">Support Content</div>
<div id="sh-zone-menu-sub-contact-target" class="submenu-content">Contact Content</div>

และนี่คือรหัส JQuery:

var $_ = jQuery;
$_(document).ready(function(){  

    function showSubMenu()
    {
        var source_id = $_(this).attr("id");
        $_(this).addClass("showsubmenu");
        $_("#"+source_id+"-target").show();
    }

    function hideSubMenu()
    {
        var source_id = $_(this).attr("id");
        $_(this).removeClass("showsubmenu");
        $_("#"+source_id+"-target").hide();
    }

    var subMenuConfig = 
    {
        interval: 100,
        sensitivity: 4,
        over: showSubMenu,
        timeout: 300,
        out: hideSubMenu 
    };

    $_("ul li.submenu").hoverIntent(subMenuConfig);
});

ทุกอย่างทำงานได้ดี แต่เมื่อเนื้อหาเมนูถูกเปิดเผยและฉันพยายามวางเมาส์ไว้เหนือเนื้อหานั้น เนื้อหานั้นก็หายไป

วิธีการกำหนดค่าโค้ด HTML ก่อนหน้านี้ DIV เนื้อหาเมนูย่อยถูกซ้อนอยู่ภายในแท็ก LI และวิธีนี้ใช้ได้ผลดี กล่าวคือ ด้วยการโฮเวอร์ลิงก์เมนูและเนื้อหา อย่างไรก็ตาม ฉันประสบปัญหาเกี่ยวกับการวางตำแหน่งสำหรับ IE (เนื่องจากเนื้อหาเมนูครอบคลุมส่วนใหญ่ของหน้า) ดังนั้นฉันจึงจำเป็นต้องนำเนื้อหาเหล่านั้นออกจากแท็ก LI

วิธีที่ฉันมีตอนนี้ใช้ได้กับ IE (ตามตำแหน่ง CSS) แต่ hoverIntent ไม่ทำงาน

มีวิธีใช้ hoverIntent เมื่อเนื้อหาเมนูของฉันไม่ได้ซ้อนอยู่ภายในแท็ก LI หรือไม่!

ขอบคุณ.