jQuery UI显示/隐藏幻灯片左侧在IE中不起作用

我正在尝试使用jQuery UI获取一个可滑入/滑出的菜单，但在任何版本的Internet Explorer中似乎都无法使其正常工作

我使用了一些条件来稍微修改IE的代码，但这只是“hover”事件和“click”事件之间的区别。它在其他所有浏览器中都能完美地工作，但在IE中却出现了故障

您可以在以下位置查看站点本身：

我试图修改显示在旋转图像左侧的菜单

值得注意的是，当我尝试剥离各种元素时，当我删除LI项并只留下链接时，它似乎开始工作

谢谢大家

这是我所有的代码

Javascript（用于IE）：

下面是它试图执行的HTML（精简为一个LI）：

---

查看控制台中的布局选项卡。主菜单容器的高度和宽度分别为0和0。你所看到的只是溢出。尺寸标注可能有助于查看控制台中的布局选项卡。主菜单容器的高度和宽度分别为0和0。你所看到的只是溢出。尺寸标注可能会有所帮助

这取决于您正在查看的IE版本，Hover只在上面工作，而不是

或其他任何内容。取决于您正在查看的IE版本，Hover只在上面工作，而不是

或其他任何内容。就是这样！我在UL和LI项目中添加了一些

clear

属性，现在可以使用了。非常感谢！就这样！我在UL和LI项目中添加了一些

clear

属性，现在可以使用了。非常感谢！

jQuery(document).ready(function() {
    jQuery('#arrow').click(function(){
        jQuery(this).hide('slide',{direction:'left'},200, function() {
            jQuery('.menu-main-container').show('slide',{direction:'left'},500);
            jQuery('.menu-main-container li a').show();
        });
    });
jQuery('.menu-main-container').mouseleave(function(){
    jQuery('.menu-main-container').hide('slide',{direction:'left'},500, function(){
        jQuery('#arrow').show('slide',{direction:'left'},200);
        });
    });
});

<div id="home-nav">
    <div id="arrow" style="display: block; ">
        <img src="http://actionfreightinc.kemdev.com/wp-content/themes/thesis_18/custom/images/menu2.png" alt="Menu">
    </div>
    <div class="menu-main-container" style="display: none; ">
<ul id="menu-main" class="menu"><li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-5"><a href="/">Home</a></li>
</ul></div>                
    <div class="clear"></div>
</div>

        .custom #home-nav {
        margin: 0;
        padding: 20px 0 20px 0;
        position: absolute;
        left: 10px;
        top: 50px;
        z-index: 600;
    }

    .home .menu-main-container {
        background: transparent url(images/home-nav-bgd.png) no-repeat right bottom;
        margin: 0;
        display: none;
        width: 200px;
        /*float: left;*/
        padding-bottom: 20px;
        padding-right: 0;
        padding-left: 0;
        padding-top: 0;
        z-index: 601;
        position: absolute;
        left: 0;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;

    behavior: url(PIE/PIE.htc);
    }
    .home .menu-main-container #menu-main {
        background: transparent url(images/home-nav-bgd.png) no-repeat right top;
        padding: 20px 20px 0 20px;
        margin: 0;
        width: 160px;
        z-index: 602;
    }
    .home .menu-main-container #menu-main a {
        width: 140px;
        font-size: 1.6em;
    }

    .home #arrow {
        position: absolute;
        left: 0;
        background: none;
        width: 38px;
        height: 255px;
        display: block;
        padding: 0;
        cursor: pointer;
    }

    .custom #home-nav .sub-menu {
        left: 140px;
        top: 0;
        background: #FFF;
        padding: 20px;
        width: 140px;

    -webkit-box-shadow: 0px 0px 4px 0px #000000;
    -moz-box-shadow: 0px 0px 4px 0px #000000;
    box-shadow: 0px 0px 4px 0px #000000;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    behavior: url(PIE/PIE.htc);
    }
    .custom #home-nav #menu-main .sub-menu li a {
        width: 140px;
    }