Question

I’m using a CSS menu with an HTML structure like:

<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>

The CSS can be seen in this jsFiddle.

It works great, except that the sub-menu does not close once an item is clicked. Since the menu items trigger an Ajax update to the page, it makes for a quirky UI experience.

To solve that problem, I tried a little JavaScript:

$('div.toolmenu ul li ul li a').click(function () {
    var grand = $(this).parent().parent();
    grand.css('display', 'none');
    setInterval(function () {
        grand.css('display', '');
    }, 300);
});

That works wonderfully in most browsers. IE, however, behaves as follows:

• Submenu disappears on click
• Submenu reappears after setInterval’s callback fires

How can I make this work in IE as well? Is there a better approach to causing the submenu to disappear after it is clicked?

Answer 1

Instead of making it reappear with the interval, you can make it appear on mouse enter function. Try this:

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

});

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

If you want to create a more animated menu you can replace hide with fadeOut() and show with fadeIn().

EDIT: This is your jsfiddle modified.