I'm using jqueryui's menu feature, and the submenu overlaps other elements on the page. The problem is when I select the menu item which brings up the submenu, the submenu is displayed beneath the other elements.

I'm not sure how menu is to be configured, or if I have to override some jqueryui css elements, in order to get this to display as expected (over top of the other page elements).

The problem can be seen with the Tools menu at http://jsbin.com/hexuw/2/

Sorry the code is more complex than is necessary to show the minimal problem, but the menu call can be seen just a few lines down in the javascript file.

Thinking that this is a stacking problem I tried setting the navigation element z-index to a high number using the .ontop class, but that didn't help.