Question

I have a custom menu in jQuery that apparently doesn’t work with IE 8 & 9. It’s supposed to open multilevel menus with the hover() method, but it’s only working o IE untill the first level from the root.

Code :

$('ul#leftmenu li').hover(function() {
        if ($(this).hasClass('top'))
            return false;

        var p = $(this).parent().get(0);
        var o = $(this).offset();
        var t;
        var l;

        if (leftmenu_level >= 1)
        {
            t = 0;
            l = 210;
        }
        else
        {
            leftmenu.top = o.top;
            leftmenu.left = o.left;
            t = o.top;
            l = o.left + 210;
        }

        $(this).find('ul:first').css({
            position : 'absolute',
            top : t,
            left : l
        }).show();

        $(this).find('a:first').css('color', '#5a3512');
        leftmenu_level++;

                return true;
    }, function() {
        if ($(this).hasClass('top'))
            return false;

        $(this).find('a:first').css('color', '#777777');
        leftmenu_level--;

        $(this).find('ul:first').hide();

                return true;
    }
);

Live example (left menu) :

http://lrp-workwear.com/

Any tips?

Answer 1

Try applying position:relative to your anchor tags, this seems to force the width & height of the anchor tags correctly and triggers a hover over the entire element and not just the text as it currently seems to be doing.

Hope this helps