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: 147
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