I have a problem with a pure css dropdown menu since I added an absolutely positioned div near the bottom of the page to anchor some text into a specific position. The dropdown appears on mouseover, but when you try to mouse over the submenu it disappears. I'm not using any javascript for the menu.

 

Since I realised the problem, I've isolated the code to the one page where I need to have the extra div with the text, but I cannot think of another way to position the text where it needs to be - just over the image it refers to - without using relative/absolute positioning, and it seems that this is causing the problem for sure, but I don't understand why.

 

This is the page: http://www.cottagesinstives.co.uk/lowersaltings_apartment.html

 

The dropdown menu that's affected is the 'properties' tab.

 

The image and its text are at the bottom of the page.

 

This behaviour appears to be consistent across all the browsers I've tested - IE, Safari and Firefox.

 

Any suggestions would be most welcome.

 

Thank you.

Try putting the z-index at a high number (999 for example) your submenu is too low in the stacking order.

Hi thanks for the reply, I had done this already but not in the right place! Putting it on the #nav li ul sorted it.

 

Thanks again.