Javascript 相对定位的悬停菜单在Chrome/FF中运行，在IE中中断

我有一个菜单，当有人悬停在某个导航项上时，它会“打开”。通过“打开”它，它只是用jQuery添加或删除“隐藏”类。为了让它显示在主欢迎图像的顶部（菜单是透明的，完全覆盖了标题图像的空间），它相对位于0px x x 0px参考div内

JQUERY:

$(document).ready(function() {
    $("#products_open_link").mouseenter(function(event) {
        $("#products_menu").css("width",$("#header_img").width());
        $("#products_menu").css("height",$("#header_img").height());
        $("#products_menu").removeClass("hidden");
    });
    $("#products_open_link").mouseleave(function(event) {
        if ($('#products_menu').is(':hover')) {
            $("#products_menu").mouseleave(function(event) {
                $("#products_menu").addClass("hidden");
            });
        }
        else {
            $("#products_menu").addClass("hidden");
        };
    });
});

HTML:

金属成型






焊接




涂层

在铬和FF中工作良好。在IE中，它出现了，除了标题图像外，所有图像都向下移动，就像200px一样。因此，透明菜单是它应该位于的位置，但它会导致标题图像向下移动，这也会使菜单不覆盖标题图像。我对js/jQuery还不熟悉，所以这可能会很混乱，但它做了它应该做的事情。我只是想知道如何在IE中解决这个问题

---

你能分享一个JSFIDLE或codepen链接吗？这不是你的jquery，而是你的css不适合IE，分享你的css代码。

#products_菜单{背景：rgba（37,41,87,0.8）；位置：relative；z-index:100；bottom:0；color:#FFFFFF；display:block；}

<div id="reference_point" style="max-width:0px;max-height:0px;">
    <div id="products_menu" class="hidden part_of_menu hidden-xs hidden-sm">
        <div class="products_menu_padding">
            <div class="row">
                <div class="col-md-3">
                    <ul>
                        <strong>Metal Forming</strong>
                        <li><a href="#">Stamping</a></li>
                        <li><a href="#">Wire &amp; Tube</a></li>
                        <li><a href="#">Coin-Pierce-Trim</a></li>
                        <li><a href="#">Fasteners &amp; Rivets</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <ul>
                        <strong>Welding</strong>
                        <li><a href="#">Resistance</a></li>
                        <li><a href="#">MIG</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <ul>
                        <strong>Coating</strong>
                        <li><a href="#">Powder</a></li>
                        <li><a href="#">E-Coating</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <ul>
                        <strong><a href="#">Prototype/Short Order</a></strong>
                        <strong><a href="#">Quality</a></strong>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div>
    <img src="img/header_2.jpg" class="img-responsive" id="header_img">
</div>