z-Index Issue with jqGrid and Wijmo WijMenu

I am trying to use the jQuery-based Wijmo WijMenu control with jqG开发者_开发技巧rid in order to create a dynamic grid toolbar.

Getting the menu to appear works fine. However, my menuitem1 has a submenu, and this submenu falls behind the jqGrid when I hover over 'menuitem1'.

I've tried setting the z-Index on the menu and the individual menu items, but with no luck. This behavior happens on IE9, Chrome, FF and Safari. It does work when I turn compatibility mode on with IE9, which makes me think it may have something to do with the z-index...but I'm not sure. I feel like I'm missing something obvious.

I created a jsFiddle to demonstrate my issue.

Can anyone help me get the submenu to fall in front of the jqGrid?

Thank you in advance for any help/advice.

It's not a z-index issue. The .ui-jqgrid .ui-userdata has overflow:hidden on it. Try making it overflow: visible.

Although I'm not sure if it will cause problems on the grid when doing this.

Change your CSS from

.ui-jqgrid .ui-userdata {
    border-left: 0px none;
    border-right: 0px none;
    height: 21px;
    overflow: hidden;
}

.ui-jqgrid .ui-userdata {
    border-left: 0px none;
    border-right: 0px none;
    height: 21px;
}

Removing the overflow:hidden It was hiding your menu.