Hiding a CSS Dropdown Menu in IE

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?

IE9 on Win7 seems to be behaving correctly.

Blazemonger
– Blazemonger

2013-02-09 02:21:55 +00:00
Commented Feb 9, 2013 at 2:21 — Blazemonger
– Blazemonger, Commented Feb 9, 2013 at 2:21

rkrdo · Accepted Answer · 2013-02-09 02:33:49Z

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.

answered Feb 9, 2013 at 2:33

rkrdo

1968 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Hiding a CSS Dropdown Menu in IE

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related