[Solved] Strange behavior on menu hover

[Derek Hunziker]

Hello,

There seems to be a display issue with the menu when you hover over one of the root items. To reproduce the issue, you have to first expand a section then quickly move your mouse out - and then back over the menu while it's still collapsing. Put another way, you have to hover over an item while it's collapse animation is running.

What happens is the sub UL will appear behind some elements on the page. It even occurs on the demo (the dropdown will appear behind the tabs below). I tested it and the same happens in IE 7 & 8, Firefox 3.6.6 and Chrome.

Any idea what's causing this?

Thanks,

-Derek

[Alex Gyoshev]

Hello Derek,

Thank you for spotting this problem! You can easily resolve it if you swap two lines in telerik.menu.js, namely:

    $item.css('z-index', menu.nextItemZIndex++);
    $t.fx.play(menu.effects, $ul, getEffectOptions($item));

...should turn into:

    $t.fx.play(menu.effects, $ul, getEffectOptions($item));
    $item.css('z-index', menu.nextItemZIndex++);

The fix will be included in upcoming releases.

Sincerely yours,
Alex Gyoshev
the Telerik team

[Derek Hunziker]

Alex,

Thank you for the quick fix!

-Derek

[Derek Hunziker]

Also, this is unrelated and most likely a bug in Firebug's try/catch handling, but the isBogus function was throwing an error in Firefox.

The following seemed to fix it:

function isBogus(element) {

    if (!element)
        return true;

    try {
        var parent = element.parentNode;
        return false;
    } catch (error) {
        return true;
    }

}

[Alex Gyoshev]

Hello Derek,

Thanks for the tip -- we modified our code not to rely on this function during the past quarter, so the new release should not have this problem.

Regards,
Alex Gyoshev
the Telerik team