CSS dropdown menu does not work when mouse is over two overlapping canvases

Question

I am not sure if the title of the question is clear, but here is a fiddle demo of the problem. When the the dropdown menu is expanded and mouse is taken to the lower items the menu colapses since the submenu is on top f the over lapping canvas.

The interesting part is if I remove the second canvas the menu works fine.

<canvas width=500 height=500 id="canvas1"></canvas>
<canvas width=500 height=500 id="canvas2" style="position: relative; top:-500px"></canvas>

I also tried to create a fiddle using jqueryui but ther also it does not work as expected.

Please help

Answer 1

If you un-comment the part inside /* Bring the nav above everything else--uncomment if needed. it works just fine, which means adding

position:relative;
z-index:5;

to #nav

Demo

Answer 2

Have you considered using ready-to-use solution, based on CSS and Canvas? A menu builder like Swimbi - http://f-source.com/swimbi/ and Chrome version