Mobile Friendly Website


Doing it with style

flyout menu COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

David, IE7 should not need the IE6 conditional comments as it will work using li:hover
The only reason a flyout will disappear is because there is a gap between the top level and the flyout and crossing the gap will lose the :hover on the top level.
There must be no gap between the two so that the :hover is maintained.
(15.11.2006, 08:06)

Stu: OK I’m getting a little off the road here but experimenting a bit.

From all indications IE7 should work here – maybe with a CC

Could you demonstrate how to close the gap? Nothing I’ve done so far is working.

.menu ul li a:hover {color:#fff; background:#b3ab79;}
>>>Is this the gap<<<
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
(16.11.2006, 05:13)

david, IE7 does not use the IE6 stylesheet so any adjustments to a:hover will make no difference.
You need to adjust the non IE6 style sheet and make adjustments to .menu ul li:hover ul

BUT if Firefox is ok then check that you have a standards compliant doctype.
(16.11.2006, 07:56)


It sounds like everything should work if the doc type is right. I use the one from your page and tried 12 others with no luck. IE6 and FF works great.

IE7 does not see anything below .menu ul li ul {display: none;} on the non IE6 CSS file

I can delete everything from .menu ul li:hover a {background: #183A21; color:#fff; } on down and IE7 display is unaffected.

How would suggest I adjust .menu ul li:hover
ul on the non IE6 file?

Do you have a tutorial? This is still greek and I'm shooting in the dark....

Thanks for being there!!
(17.11.2006, 06:36)

david raye:-
Problem Solved.

Your "doc type" clue was the key. Turns out the page where the example was located loaded the doc type statement lower in the sequence.

This was never a problem with other examples in IE6, but IE7 is apparently a bit sensitive.

Once the doc type was in its new home all is well.

Well that was 6 days down the tube - but I learned a lot!!!

Thanks for your help!!!
(18.11.2006, 01:15)

billy girlardo:-
Hi Stu. First, a big thanks for all your great work and dedication to the CSS cause.

Along with an earlier commenter, IE7 is behaving badly for me (but that's just how the M$ boys are). While FF2.0 and Opera 9.02 have the menu on my left border (since, as you know, they usually work in tandem), IE7 flips it to the right-side border. I can see the menus flying out, but haven't figured out what is causing IE7 to do that. (thought to self: I need to see if I can have multiple versions of IE loaded on the same computer).

If you get a chance, my name with a - in the middle is my dot com. I Palled you some money yesterday, just let me know if you feel more is the norm (I have an email link on my static version).

Thanks again.
(22.11.2006, 16:08)

billy, thanks for the donation, much appreciated.

You problem with IE7 is due to the text-align:right; in the body style, remove this and all will be fixed.
Another point which you no doubt have noticed is that the flyout are fly unders. To have them flyout on top of the images add z-index:100; to the .menu style.
(22.11.2006, 20:18)

Thanks Stu, seems obvious now lol.
(26.11.2006, 05:31)

Michael Lyon:-
Thanks for all your work.

I've downloaded the "A CSS only validating flyout menu - NO javascript, 24th February 2006" (Vertical. It works fine in Internet Explorer 6.0, but in FireFox the menu doesn't show up at all. While trying to fix it, I did something that made it work fine in FireFox but in Internet Explorer, there were two of each of the primary menu items, and only the second primary menu item cascaded to a secondary menu item. But I haven't been able to recreate that condition. Do you have any idea what might be the problem with Firefox?
(23.03.2007, 08:44)

Hi Stu,

I tried the flyout menu with the IE 6 conditional comments. The menu shows up fine in Mozilla Firefox but no dropdown appears for IE 6.
The wierd part is when i open the flyout menu page on your website in IE, the menu works fine.
Can you let me know what could be the problem
(29.03.2007, 13:59)

10 of 62 comments (part 3). [ « ] [ » ] [ * ]


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page