CSS pop up menu to overflow/overlap in JQuery layout panes

Question

I' using the JQuery layout and define only the north, west and center panes. On the left side (west pane) I'm building a CSS pop up menu. With the abundance of CSS pop up menus around the web, I have no trouble making it to work. The problem that I'm facing is that the pop up menu does not overlap the center pane. You can see this behavior in my JSfiddle example. I have tried setting overflow: visible; z-index: 10001;but it didn't solve anything. What can I try next?

Answer 1

Try to add this styles

.ui-layout-west{
   z-index: 50;
   overflow: visible;
}

Update

.ui-layout-west{
   z-index: 50 !important;
   overflow: visible !important;
}

Answer 2

The simplest solution came after consulting the docs with a higher degree of attention (i.e. higher than before...). The API provides a method for setting the overflow on a particular pane. In may case, the "west" pane needed to overflow it's content. The following code did the trick:

mylayout.allowOverflow("west");

Edit: I'm not going to mark my answer as accepted. Kison's answer provided a working solution at the time and should be credited.