After finishing this update, I had yet another moment of how in the hell I didn’t figured this before. You know the feeling - you struggle with certain code for weeks or months, and then after you surrender to the reality and code the “just work, bitch” parts, you realize the simple solution was waiting just around the corner of your mind.
With several simple lines in the script, I can now use much simpler IE6-only CSS. Menus now work with any number of levels, without the need to update the ugly
.menu .adxmhover ul, .menu .adxmhover .adxmhover ul, .menu .adxmhover .adxmhover .adxmhover ul.... rules.
Even better, you now have - in IE6 - direct (not simulated) replacements for the following selectors:
It’s so simple.
I’m using script for IE6, in which I’m already using this replication of
1 2 3 4 5 6 7
which is then used in IE6-only styles as
li.adxmhover. Well, why not add more replacements? With this:
1 2 3 4 5 6 7 8 9 10 11 12 13
I can replace
No need to simulate anything, simply repeat the style rules in IE6-only part using replacement class selectors and…that’s it. You can of course update the script and add replacements for other advanced selectors, but this is basically all that I ever needed in menu styling.
The whole thing started with IE7 problems with
display property. I recoded CSS to use
visibility instead, but then Safari went scrollbars-crazy - it was due to this:
1 2 3
I then tried this:
1 2 3
but IE7 ignored
z-index change. Now really on the end of my nerves, I coded horrible positioning trickery (horizontal bottom-top variant was the worst) to minimize all problems. Luckily, good man David pin-pointed solution for IE7’s
At this point, I was so happy :) that it’s no wonder ideas sparked all over the place and dust was off the mind corner where replacement class selectors peacefully nap.