Dropdown menu getting hidden by images

Posted by Bob on Stack Overflow See other posts from Stack Overflow or by Bob
Published on 2012-11-09T16:55:42Z Indexed on 2012/11/09 17:00 UTC
Read the original article Hit count: 143

Filed under:
|
|

I have a set of dropdown menus across the top of a web page. Below is text and some images. When I hover over the top of each menu the menu then expands below as expected but while it overlaps any text on the page it is hidden behind any images. I set the z-index to 9999 and the position is set to absolute. I found if I lower the opacity of the images to say 0.6 then the menu will overlap it.

So one solution would be to detect when the menu is being hovered over and then in JavaScript or JQuery temporarily reduce the opacity of the rest of the page until the cursor moves off the menu. If so I'm not sure how to do that but is that the best approach?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about css