CODEWITHSUNDEEP
csshtmlcanvasdrop-down-menuonmouseover
me_digvijay
me_digvijay

Reputation: 5492

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

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

Upvotes: 1

Views: 214

Answers (2)

dmpost
dmpost

Reputation: 96

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

Upvotes: 0

Zach Saucier
Zach Saucier

Reputation: 25944

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

Upvotes: 2

Related Questions