Jquery 在IE9中使用悬停菜单

我需要一个悬停菜单在IE9中工作。它在IE 10和IE Edge中工作。我不知道如何着手修理它。我想可能是这样的。subnav_wrapper__ul：首先在JS中，我不知道如何着手解决它

我的HTML

<div id="main-menu" class="collapse navbar-collapse mainMenu">
    <ul class="nav navbar-nav home-nav">
        <li class="nav_active"><a href="javascript:void(0);">HOME</a></li>
        <li class="nav_item">
            <a href="javascript:void(0);">ABOUT US </a>
                <ul class="subnav_wrapper_ul">
                    <li class="subnav_item">
                        <a href="javascript:void(0);"></a>
                        <a class="" href="http://www.profishinsea.co.uk/client_area/nicole/noor-tech/our-vision.html">Our Vision</a>
                    </li>
                    <li class="subnav_item">
                        <a href="javascript:void(0);"></a>
                        <a class="" href="http://www.profishinsea.co.uk/client_area/nicole/noor-tech/our-vision.html">Our Team</a>
                    </li>
                </ul>
        </li>
        <li class="nav_active"><a href="javascript:void(0);">CONTACT US</a></li>    
    </ul>
</div>

我的JS

---

您可以使用css执行此操作：

ul.navbar-nav li:hover > ul{ display:block; }

IE不支持非a标记上的：hover伪元素，但是 我已经解决了这个问题。我尝试了许多其他的解决方案 列出：添加正确的doctype以避免怪癖模式

得到

---

尝试使用简单的CSS而不是javascript@Chibicss Tric总是更好。很高兴这有帮助。

$('ul.navbar-nav li').hover(
    function () {
        $(this).find('.subnav_wrapper_ul:first').css('display','block');
    },
        function () {
            $(this).find('.subnav_wrapper_ul:first').css('display','none');  
    }
);

ul.navbar-nav li:hover > ul{ display:block; }

a {display:block; width:148px; height:140px; background:red}
a:hover {background:green;}

<a href=”#”>&nbsp;</a>

a:hover {cursor:default}