Three-Level Drop-Downs/Flyouts – IE7 Style
Some things really frustrate me … I mean REALLY frustrate me! One of those things is the CSS drop-down or fly-out menu. I know – it’s supposed to be simple and easy, ala HTML Dog’s Sons of Suckerfish. Yet, somehow, it’s never actually easy – layouts need to be changed, new bugs having to do with those layouts are uncovered, javascripts and htdocs that worked perfectly on other sites mysteriously don’t work now. Almost every time, I think to myself, “This is going to be easy! I’ve done something very similar to this recently!” And almost every time I am wrong. There’s always a new wrench in the works.
Well, this time the wrench was IE7. I had a functioning drop-down/fly-out menu which made use of the Hover Whatever method, but for some reason, SOME REASON which I couldn’t for the life of me discover, IE7 just would not display that third-level nav list. The second level would appear just fine, but that third level was invisible … would never show itself upon hover. I tried absolutely everything I could think of – I rewrote the code again and again, trying angle after angle. But no matter how I wrote it, I just couldn’t get it to work for all the tea in China. Finally, FINALLY (can you sense my frustration?) I found a solution. A weird solution which didn’t make any sense to me at all, but a solution nonetheless.
I discovered that if I put a border on that third UL … even if it was a border of 1px solid transparent, it would show up. Why, why, WHY? I don’t know. I really can’t even imagine. But, after a full day of trying desperately to make this work, I was just happy that it finally did. Hopefully, this discovery can help at least one other person to avoid the insanity.
Good luck.
November 8th, 2006 at 1:02 am
Good old IE, frustrating Web designers everywhere. They do it on purpose, you know, to give you that great feeling of achievement.
Unfortunate about the hours of hair-ripping beforehand, isn’t it..
(Glad you finally fixed it though!)
November 8th, 2006 at 4:34 pm
Just another demonstration of your brilliance and status as a web design goddess!
December 23rd, 2006 at 7:37 am
I noticed the menu doesn’t play well with IE6’s form elements like the select element (aka drop-down list). It probably needs an iframe masking technique (using javascript to position under the menus).
January 30th, 2007 at 5:28 am
Thanks again
I used this code to resolve a problem with Verticl menù
February 22nd, 2007 at 3:43 am
Ah Mani – you’ve touched on something which has been driving me NUTS for days now. I have a site which has been live for a year or so now which uses the hover:whatever method, but viewing it in IE7 totally breaks the positioning of the dropdown. I’d be interested to know if you had to make adjustments to the positioning of your dropdown at all to accommodate ie7. In case you’re interested in taking a look, the problem is with http://www.inzpire.com – the dropdown from the About Us navigational link jumps up and to the right in IE7. If anyone has any suggestions, I’d love to hear from you! By the way Mani, this is the first time I have been on your site, and I can see that I’ll be coming back on a regular basis to have a look through your tutorials and tips – great work.
June 25th, 2008 at 9:42 am
instead of putting a border around the UL, try putting in a width to the UL and/or the LI. I’ve run into the same thing as you in 2 separate instances. This should fix your issue.