Dropdown Menu Fix for Opera

Yesterday I almost pulled out all of my hair trying to make dropdown menu on one of our sites to work in Opera 7.54. Browser version sniffing instead of feature testing or object detection is what I hate the most, but I had to do it and at the end it serves its’ purpose well.

My favorite method of making dropdowns is to create nested unordered lists and then switch block and none values for the display property with :hover pseudo-class. This of course doesn’t work in IE without JavaScript, because I use JavaScript to add and replace a class attribute for the hovered element in IE.

I usually set CSS rule position: relative; for containing list item and position: absolute; for the nested list. But, hey! This doesn’t work in Opera 7.54 (and maybe in some earlier 7.x versions)… Filtering of CSS for different browsers is in my job description and I’m facing it almost every day, but it’s always something new which drives me nuts at times.

Browser Oddities

These are some browser’s speciffic oddities:

• In Firefox and Opera 8 a combination of display: none || block; makes flash movie in the header jumps and flicker, so I have to use visibility: hidden || visible; switching. position: absolute; works fine.
• In Internet Explorer for Windows it’s all the same if you switch visibility or display values, but position: relative; shifts content underneath for the height of the drop down, so it must be position: absolute;.
• In Opera 7.54 it also works fine with both visibility and display values switching, but Opera 7.54 has some rendering issue when nested list is absolute positioned and a few background-images overlap. Crap!

The summary is—we need position: absolute; for FF, Opera 8 and IE, and position: relative; for Opera 7.54. The visibility property value switching should work in all of the mentioned browsers.

How to Set Different Rules for Opera 7.54

Since there’s no proven CSS filtering for Opera version 7.x only, I had to do the User Agent sniffing with PHP. I already introduced server-side CSS parsing. In parsed CSS file, I can dinamicaly write CSS rules, depending on a given conditions, like the following generic example:

Remember, User Agent sniffing is not 100% reliable, but in this case, there was no alternative. Here are some of the predefined User Agent values in Opera 7.54: