Question

I have some dropdown menus that are display:none and only show upon click (using jquery). However, there are divs that have been placed in positions that lie “underneath” the dropdown menu. They have to be underneath considering the dropdown must go overtop everything when it it shows up. However, is there anything I can do to “click through” these dropdown divs?

I know that there is “pointer-events:none” But this would seem to disable all clicking on the dropdown menu, which I cannot have.

I’ve seen 100s of websites with dropdown menus that cover entire sections of their website. However, when not in use, these menus don’t block divs that are positioned “underneath” so what’s the solution here?

Is it something I need to fix with the positioning of my dropdown menus?

Any and all help is appreciated. It took me forever to even discover the problem. I was so stumped as to why my divs weren’t clickable! Then I did “clear:both” and it moved down and finally realized the hidden divs were in the way.

Answer 1

It seems like you’re using opacity: 0 on these dropdown divs, which keeps them in place, and block the mouse events from firing on the elements underneath.

You should be hiding them differently, with either of the following:

1. Use visibility: hidden or display: none (if you want to also hide it from screen readers)

2. Absolutely position them off the visible viewport, by using a huge negative offset (e.g. -999em).
   This will ascertain that they’re still readable by screen readers.

Alternatively, you can toggle pointer-events:none together with its visibility, but old IE does not support pointer-events.