Javascript 在IE中隐藏CSS下拉菜单

我使用的CSS菜单具有如下HTML结构：

<div class="toolmenu" style="min-width:800px">
    <ul>
        <li><a class="dropdown left" href="#">Main A</a></li>
    </ul>
    <ul>
        <li><a class="dropdown right" href="#">Main B<span class="tm-arrow">&#9660;</span></a>
            <ul class="tm-width-2">
                <li><a href="#">Sub i</a></li>
                <li><a href="#">Sub ii</a></li>
                <li><a href="#">Sub iii</a></li>
                <li><a href="#">Sub iv</a></li>
            </ul>
        </li>
    </ul>                   
</div>

这在大多数浏览器中都非常有效。然而，IE的行为如下：

• 子菜单在单击时消失
• setInterval的回调触发后，子菜单重新出现

---

我如何在IE中也能做到这一点？是否有更好的方法使子菜单在单击后消失？

您可以将其显示在鼠标输入功能上，而不是按间隔重新显示。试试这个：

$('div.toolmenu ul li ul li a').click(function () {
    var grand = $(this).parent().parent();
    grand.hide();

});

$('.dropdown').mouseenter(function(){
     $(this).next('ul').show();
});

如果要创建更具动画效果的菜单，可以用fadeOut（）替换隐藏，用fadeIn（）替换显示

---

编辑：这是您的修改。

Win7上的IE9似乎运行正常。太棒了！谢谢你的帮助。

$('div.toolmenu ul li ul li a').click(function () {
    var grand = $(this).parent().parent();
    grand.hide();

});

$('.dropdown').mouseenter(function(){
     $(this).next('ul').show();
});