Grails UI Menu flakey behavior in IE

Question

I'm using a GRAILS UI (1.2-SNAPSHOT) an it's implementation of the YUI menubar (YUI 2.7.0.1). I am seeing flakey mouseover behavior in IE (Firefox is ok). When I mouse over the menu item with a submenu, it will show. As I try to mouse over the sub-menu, the submenu disappears before I can click. This happends in a pattern I haven't fully figured out. Usually the first time I select a menu it's fine but if I move around the menu back to a menu item, the submenu begins to display this behavior. By clicking and holding the mouse button I can usually get the sub-menu to stick around.

I've palyed with various configurations like keepopen and automenudisplay but they don't seem to change the behavior. I have not seen much posted about this. But I also don't see menu's documented in the UI plugin either. I could really use some feedback if UI menu is not ready for primetime yet or I'm missing something else. I've not worked with much AJAX before.

Below is the code with the added options I played with that did not have a positive impact.

<gui:menubar id='menubar' renderTo='mainmenu' autosubmenudisplay="false" shadow="true" keepopen="true">
<gui:menuitem url="/esmzone">Home</gui:menuitem>
        <gui:submenu label='Profile'>
            <gui:menuitem url="${createLink(controller:'memberProfile', action:'view')}">View</gui:menuitem>
            <gui:menuitem url="${createLink(controller:'memberProfile', action:'profile')}">Edit</gui:menuitem>
            <gui:menuitem url="${createLink(controller:'user', action:'account')}">Settings</gui:menuitem>
            <gui:menuitem url="#">Subscription</gui:menuitem>
        </gui:submenu>

Here is the code generated by the plugin:

<script>
YAHOO.util.Event.onDOMReady(function() {
    GRAILSUI.menubar = new YAHOO.widget.MenuBar("menubar_div", {'autosubmenudisplay':  false,
'shadow': true,
'keepopen': true});
    GRAILSUI.menubar.render('mainmenu');
});
</script>

Answer 1

I made some progress on this by researching the YUI library. There is a documented bug with IE7. Apparently the grails-ui plugin does not address the fix. I'm testing with IE8 but I assume it's still there.

http://developer.yahoo.com/yui/menu/#knownissues

It appears that you should set the zoom property to 1 (zoom:1) for the bd class. I added the following code to my style sheet

div.yuimenubar .bd {
zoom: 1;
}

and it seems to help. I see no side effect in Firefox but I didn't dynamically check for the version of browser as I would need to hack the code that generates the YUI javascript and put in

if (YAHOO.env.ua.ie === 7) {
YAHOO.util.Dom.addClass(document.body, "ie7");
}

after the render() call. Then instead of the style I added you could do an IE7 (probably >=7) style.

This is what the Yahoo site had to say about it:

The following application of "zoom:1" sets the "hasLayout" property to "true" and prevents first tier submenus of a MenuBar from hiding when the mouse is moving from an item in a MenuBar to a submenu in IE 7. For more on the "hasLayout" property: http://msdn.microsoft.com/en-us/library/ms533776(VS.85).aspx

Answer 2

nope, didn't work.