Dropdown menu not working below header

Dropdown menu not working below header

Hello,

I'm working on a CSS dropdown menu. I've got it working on all browsers I tested, incl. IE, FF, Safari. Only with Opera (tried on 10.53, Vista) I have this weird bug(?):
Below the height of the header div, the dropdown was displayed but didn't work, i.e. the the links were inactive, and when trying to select text in the dropdown, the text under the dropdown window was selected instead (that's text that was actually invisible, becaused covered by the menu).

My idea to resolve this was to increase the header div height by positioning an invisible element absolutely below the furthest vertical extension of the menu. This works, partly: the menu functions, i.e. I can access all items.
But: when leaving the menu, the part of the dropdown menu that extends below the top of the main container (below the header) remains (see attachment, please). It's only displayed, not active. When scrolling that messed up part out of view and back, the remainders of the dropdown are gone.

To me this seems to be a bug in Opera. I'm wondering why no one else seems to suffer from the same issue.

Any ideas?

Thank you!

Ralf.


messed up dropdown.png

No idea how to fix it, I think it's a bug with the latest Opera's... but I've seen it in various places with any element that is a "popup", like position:absolute;z-index:1000...etc, Opera fails to redraw some of the elements underneath once the floating one has been closed/hidden, I think it depends on the type of underlying elements.

So... I can confirm, but... not offer much help, about the only thing I can think of (without testing) is perhaps setting the menu background and foreground colors to transparent, before closing/hiding it. Not a very pleasant solution (if it works)... but... .. .

Thanks for your reply, Vectronic. Your confirmation is already helpful.

Setting the floating menu to transparent requires JS, I guess. That's not too bad, this site depends on JS anyway. We might give it a try.

Looking at the menus here (My Page, Opera Link, etc) they don't seem to be doing anything special, and the menu has no redraw issues, so maybe compare your CSS with theirs, could be something rather obvious but overlooked for some reason.

The only immediate difference that I can tell (having not seen the code for your/that site) is they are using background images, but from your image it looks like just a solid color... so maybe that's the difference...

Your best bet would be to strip out all the irrelevant stuff, create a simple test page that has one menu, and one underlying DIV... and play with that till it works, then merge what you find out there, with the main site.

Like Vectronic said, it would be helpful if you could provide a trimmed down version of your site with just the menu problem. This will make it much easier to see what's happening.