Mobile Friendly Website

CSSPLAY

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}cssplay.co.uk.

Post a comment


Current posts

Luke the Fluke:-
well done I knew you would give in - you had no choice really - demand was always going to be high for this. I have had your drop downs and flyouts running on a single menu structure but using IE comments ( lots of them ). Although only editing one menu appeals to me, will it cause me problems doing things this way or should I stick with using two menues as you suggest in your work. I also prefer to use images but I am sufering a little when flicking over to IE (with security high/javascript off) The menu expands down/and right a little. I tried border="0" in the table tags - but no good
and don't know what to do here. Any ideas? I was hoping for ie & non ie to be precicely the same in appearence if possible - New menu looks like it may do this? Haven't tried yet. Thank you for (as far as I am concerned) cracking the impossible. I don't know why you keep saying "just for fun" & "don't take this seriously" - this is a damn serious piece of kit that has just got to be used. I just need my menu to stay in its place and fold away again and "WORK" without having to add extra stuff for no JS browsers or take up additional space. A big big thanks.
(28.02.2006, 00:46)

Yo Man:-
Was just browsing through your menu and i was having problems on moving the mouse down the list from the flyout menu's. It would generally get half way down and then disappear.

Not sure if this is just a problem with my browser but i am using FF.
(01.03.2006, 08:50)

Stu:-
Yo Man, I am using FF v1.5.0.1 and it works fine.
(01.03.2006, 15:51)

Stu:-
A more user friendly rewrite coming soon...only one menu and validating etc etc.
(07.03.2006, 16:06)

Ringo:-
Wow. This is really what I have been looking for. Will for sure donate if I can get this thing working for my site:-)
My problem is that when I put it on my site, it will only allow for flyouts in FF and NOT in IE. That means that IE will just show part of the menu, and that will be dissaster.

Maybe I am making the error, cause I find the source a little overwhelming, when testing the menu on your site it all works fine.

Does it use some sort of Js, or .hct file or something I don't know about?

Thought I saw some tables in the markup? Is it not 100% div based or do you use nested tables?

Would you consider putting the xhtml and css in separate files like we often see on other sites? I mean when clicking the vertical menu link, one see the menu, and below the menu both the xhtml markup and the Css posted on your site, so no need for "view source"? Think it would be nice for noobs like me.

I also enjoy your Snazzy Borders, could you consider making a more descriptive article on how you did this?

Killer site. Rock on dude!, and you will get my money!
(16.03.2006, 12:20)

Dual Core:-
Bravo Stu. How might one get the menu to display correct in win IE? Menu does just fine in mozilla and firefox but not in IE. The Flyouts does not show, hence unusable. About 50% of menu is invisible to visitors using IE. Stange thing is that on your site the menu works without flaws,
so the error is on my part. Any tips or help?
(16.03.2006, 15:46)

Dual Core:-
Hm. Now the menu is usable in IE. But for some reassons I must keep the style attributes in the xhtml head part. When I move that to my stylesheet, that is when things get messy. I need for the menu to be as clean as possible, and with good markup. It is not an option to keep any style code in the xhtml file. Because it is then read by browser every time a page is loaded, as when in the css file, it loads only once, rest from cache. Is there any fixes for this?
(16.03.2006, 16:11)

Stu:-
Dual Core, I have now updated this set of three menus to show how to have the stylesheets as separate files and load them into the page. I have linked to the files so that you can easilty download them (including the xhtml).
(16.03.2006, 20:18)

Dual Core:-
Well well, look like I got what I wanted for christmas:-D

What will it cost to use the menu on a cemmercial site?
(17.03.2006, 00:28)

Stu:-
Dual Core, glad you like the improvements. As my copyright states, if you want to use this on a commercial site then a link back and donation to 'Support CSS PLaY' would be appreciated. The amount is left up to your generosity and the value you put on my work. Thanks.
(17.03.2006, 08:02)

Dual Core:-
Stu, I sure will donate money. This is for a noble cause. As soon as I am done with the site, I will make the donation. And a link too 'cause. Anything to keep you dropping us the css goodies. Keep up your great work.
(22.03.2006, 14:10)

david:-
I find that this does not work in IE if the div is inside a table (though opera is fine). if i take it out of the table, it works, but i need it in a table. I don't know why this is or if i could modify the css or something to make it work. i tried putting the css as "table div#menu { etc}" but that didn't work.
(23.03.2006, 15:44)

david:-
continuing the above: in mozilla, the menu comes out behind the table it is near, as in the layer behind...would settng the layer fix this
(24.03.2006, 00:09)

david:-
hey yo man. i had a similar problem in IE 6. it seemed to bug out when the mouse went below the last item in the main main menu.
(24.03.2006, 00:11)

david:-
ps the sequence of these comments seems strange. my new comment is placed in the middle, for example. is month and day being confused?
(24.03.2006, 00:13)

Stu:-
Ringo, this menu uses nest unordered lists with li:hover for all browsers except Internet Explorer. IE uses nested unordered lists with nested tables and a:hover. There is no javascript and no behaviors used, only css. The css and html are now clearly shown. There is also a tutorial on Krazy Korners that might be of use.
(24.03.2006, 12:23)

Volker:-
Hi Stu, your menu works fine, thank you. But when I try to expand the menu to width: 200px the submenus are still 105px (only in IE). What can do?
Sorry for my bad english, I'm from Germany ;-)
(29.03.2006, 10:36)

Volker:-
Sorry, me again.
The submenus are 200px but I can't fix them right beside the mainmenu. They begin at 105 px and most of it is hidden under the mainmenu.
Any idea?
(29.03.2006, 10:50)

david:-
concerning the problem of it not working when held in a table, i found that the culprit is the overflow:hidden for .menu ul li a, .menu ul li a:visited lines. take that out and it works.
(30.03.2006, 03:08)

Volker:-
Thank you David for your help. I deleted the overflow:hidden and increased the value of width and left about 50px. But the result is the same: most of the submenu is hidden. Another tip?
(30.03.2006, 06:52)

david:-
volker: when you changed the left:105px; values:

did you change all four?
did they move at all?
did you check for typos?
did you remmember to put a ';' at the end of it.
did all browsers behave the same?
i had to set it to a very large value, like 350px, or 50%, and then i worked my way backwards to get it where i wanted. I mystyped px at least twice. i deleted the semi-colon also by mistake.

good luck
(31.03.2006, 12:44)

Stu:-
I have updated the style sheets to show how to change the widths of the sub levels.
(04.04.2006, 23:38)

Mike:-
PLEASE HELP !!

I'm sure this is VERY quickly answered.

I'm messing about with the cross browser flyout menu and need to change the grey colour of the menu (i.e BEFORE it is hovered over) ... I just cannot find this grey colour in any of the files.

Your help would be much appreciated
(30.04.2006, 13:39)

Stu:-
Mike the color style you want is background:#c9c9a7;
(30.04.2006, 13:52)

James:-
I found a bug in your flyout menu..

in firefox 1.5.x when the menu item contains more than oneline of text, the background color of the cell does not extend to the next line. Works in IE, but not in firefox. Could be an easy fix, but I am a novice, check it out!
(24.07.2006, 21:21)

Gary Klingemann:-
Hi Stu,
New to CSS menus but was curious to know if each category flyout could occupy the same space at the top of ITEM 1 instead of at the top of its respective ITEM.
(13.10.2006, 20:09)

Stu:-
Gary, sure can. Just remove the position:relative from the <li> style.
.menu ul li {float:left; margin-right:1px;}
(13.10.2006, 20:19)

Tanja:-
Hi:)I am trying to use this menu for my site, but I've encoutered a problem using the menu in a template. After I apply a template to a page,i can not correnct the links anymore... well, i can correct them in the template,but they are not corrected on the pages using the template.Is there anything I can do about it?
(31.10.2006, 10:12)

:)Ben:-
Does IE7 break this? Had this set up and working on a site, then when I came back to it a few weeks later the flyouts were grounded. Couldn't figure it out since I handn't changed anything, but then I realized that I was now using IE7. Going to go try to debug, but figured I'd drop a wonder.
As always, thanks for the great site.
Cheers,
:)Ben
(10.11.2006, 15:59)

Stu:-
Works fine inIE7.
(10.11.2006, 16:35)

David:-
Stu,

I am new to CSS and so glad I found your site... What an inspiration! It is certainly helping my understanding of CSS!!!

I do have a question on your multi browser flyout menu...

I have been disecting the menu to understand how CSS menus work.

Recently I upgraded to IE7 - like last night. Going back to the menu, the flyouts did not work. -- no color change on hover and no flyout - the link works fine when clicked.

in firefox, IE6 (friends machine), netscape - all works as before.

I checked the code for the ie6/css and the main css files, the page menu files against the code on the site to make sure i did not damage anything, and even replaced the doc type to no avail.

Yet on your site, the menu works fine.

What would cause this and do you have any suggestions now that I am relegated to IE7?

Thanks so much for sharing your talents with the global community.

David
(13.11.2006, 03:26)

David:-
I may find the answer to my question (above) yet.

The problem was that IE 7 was not finding the CSS IE6 file. Once pointed in that direction with a conditional, the menu worked in IE7 (color change and flyout)

...but once the mouse leaves the main menu display to mouse over the flyout, the flyout disappears.

What part of the script is responsible for the ability to click the flyout?

Thanks Again!
(15.11.2006, 06:17)

Stu:-
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)

david:-
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;}
END OF MAIN
>>>Is this the gap<<<
SUB FLY OUT
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
Thanks!!
(16.11.2006, 05:13)

Stu:-
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)

David:-
Stu,

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)

Stu:-
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)

BillyG:-
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 2.0.0.3 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)

Sriram:-
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)

Meza:-
Can this menu support more than 3 levels? I have tried to extend mine to 4 levels but on hovering over a level 2 item with children to levels 3 and 4, both 3 and 4 display at the same time.
help?!
(03.05.2007, 10:00)

Nick:-
Hi Stu

I wondred if it is possible to make a colourd 1px border. I can make a border, but it is the double width between two boxes.

Nick, DK
(01.06.2007, 23:05)

Marc T:-
Hi Stu,

i tried to use one of your Flyout Menus(Crossbrowser Flyout Menu), and everything worked fine in FF,Opera and IE 6, but my Problem is IE 7. I just don't get my mistake...So my question, is there some special tag wich has to be included to make it work with IE 7? I changed some values for my design, but that can't be the Problem (can it?) and tried to copy everything else, but it does not work.
Thx for your help and your great work!

Marc
(07.08.2007, 13:46)

Stu:-
Marc, your problem is probably because you are not using a standards compliant doctype. See my FAQs for a link to the w3c list of DTDs.
(07.08.2007, 17:22)

Marc T:-
Thx!
I had no doctype installed yet, but now it works fine!
Thx, Marc
(08.08.2007, 09:38)

Laurie:-
Hello--

I'm trying to use the vertical flyout menu, and it works great in Firefox and IE 6, but in IE 7, the flyouts disappear before you can mouse over them. I've got a DTD (XHTML Transitional) at the top of my page. I changed the conditional comments from IE 6 to IE 7 because when they were IE 6, the menu didn't appear at all in IE 7. The menu I've created is 150 px wide, and the flyouts have a left margin that's 1 pixel less than the main menu, so theoretically, there's overlap. Is there something else going on with IE 7?

Thanks for the great menu!
(13.09.2007, 20:05)

Stu:-
Laurie, the conditonal comments should not be altered for IE7. They should remain as my example. The normal reason for not working in IE7 is the doctype, but if you have used xhtml transitional exactly as on the w3c.org website (see my FAQs) then it should be ok, make sure that the dtd is not a 'cut-down' version. The other reason for the flyout disappearing is that there is a gap of 'unhovered' state between the top level list and the flyout levels.
(13.09.2007, 21:13)

Laurie:-
Thanks much for your help! I finally figured out what was wrong. I had the correct DTD, but I'm also using ColdFusion. On our development server is a free copy of CF. It puts a meta tag at the top of each file it serves up that's before the DTD, messing up the DTD. So once I moved the files onto our live server, the menu worked perfectly in IE 7. Again, thanks for the great menu and the help!
(05.10.2007, 19:44)

Guru:-
Stu, wonderful menu...had been searching for this from ages!

I have a problem. If I put background image for sub menu items sub menus dont appear in IE6. Works fine in firefox, IE7 and opera. I've put recommended DTD. Any idea?

Thanks again for your wonderful work.
Guru
(28.10.2007, 11:54)

Z:-
Hi Stu,
This code works beautifully in FF, but in IE6 I can't get the subs to "flyout". If you have the time, can you just view the short codes I have on www.hcc-sa.org & www.hcc-sa.org/iemenu.css
I'd really appreciate it. Thanks a lot. :)
(21.11.2007, 04:27)

Michael:-
Thanks for your code. I downloaded the vertical flyout menu and it works fine in IE7 but I don't see it the flyout and a machine that only has IE6 running. Also my pages are cold fusion. Any thoughts?
(13.12.2007, 23:25)

Richard:-
I love this example. Is there a download available for the style sheets?
(21.02.2008, 21:17)

fede:-
Hello,
I try this example and it works great in Firefox, IE 6, IE 7, but whit IE 5 doesn't work.
When I try the mouse over the menu the sub menu doesn't open.
why?
thank you
Fede
(04.03.2008, 08:48)

Lara:-
I am trying to use the 'A CSS only validating flyout menu - NO javascript' (www.cssplay.co.uk/menus/flyoutt.html) tutorial and am not understanding how you make use of the xhtml file for the menu. I viewed the source on the page to see where you reference the xhtml file for your page and do not see it. Can you please explain. Thanks.
(22.08.2008, 20:58)

Harrison:-
Tried using A CSS only validating flyout menu - NO javascript
In IE6, it makes a complete mess, putting the sub-menus at the top of the page, for example. I'm using css_play.cc, flyout.css, and flyout_ie.css, and getting a menu system that is useless. I've tried taking all the html from your page and loading that into Dreamweaver, so the code is identical to your site, but still no joy. Seems to me that more is needed than just the two css files you specify (flyout and flyout_ie).
(23.10.2008, 12:40)

Stu:-
Harrison, check that you have a standards compliant doctype and that you are not using a standalone version of IE6 on the same PC as IE7 or IE8. Dreamweaver will mess up my code as will most web editor packages. This system works in IE6 and the later flyout versions only use one stylesheet for all browsers.
(25.10.2008, 15:02)

Deborah:-
Great work Stu! I have been able to get this up and running in very short order.
(06.05.2009, 21:39)

Scott:-
Hello-

I just have a question about using the conditional comments for IE so that I can understand better how they work. As an example, in the XHTML code, the 2nd level list items for the DEMOS option are all listed, with HOVER/CLICK as the last one. After the HOVER/CLICK option comes the IE conditional comment for that option that basically displays the same thing, only it's used for IE exclusively. My question is, since the conditional comment comes after the original list item for HOVER/CLICK, why doesn't HOVER/CLICK show up twice in IE? It seems to me that the IE browser would read the original list item and also the one for the conditional comment, thus displaying it twice. I noticed there is no "hide" class in the IE CSS you created, but IE should still display that item, just not display the "hide" styles.

I know your code works in IE 6 because I've tested it. So, why does it work, and not display the conditionally commented items twice?
(10.05.2009, 17:23)

Stu:-
This menu should not be used for any serious work as it uses my original method dating back several years now.
IE6 only sees the top HOVER/CLICK within the conditional comments.
The IE specific stylesheet has the following styles:
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
(10.05.2009, 18:12)

Jean Paul:-
how can i download this css menu please email me on nizzujpc@gmail.com
(11.06.2009, 14:31)



Post

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://'

Support CSSPLAY

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.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page