Mobile Friendly Website


Doing it with style

Flyout with 4 sub-levels 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

GaryAJ: there are always things you can consider. A select box would be a simple lightweight solution that skips the need for a flyout entirely, but it would still be useable. You could even retain some flyout or tab style by switching visible select box by :hovered main level element, thus lessening the scrolling length somewhat effectively.

Do you need to keep the whole organization structure visible at all times? I got the image that this list would be accessible on every page. Why there can't be a centric page or pages for the organization branches?

One way to save space in the flyout navigation is that if the layout is designed so that the current main branch that is navigated in is as a separate navigation on side of the page, thus eliminating (probably) a great deal of links in the other navigation.

There are probably other ways to go, but I'm tired now (2 AM, yay!). And I don't know all that much about the data, I haven't (yet) had a need to sort out that complex organization trees, not to mention I don't know anything about the site they're in.

Hopefully some of the above applies and is useable.
(22.03.2007, 00:33)

thats really great stuff. I will play around with your code, and if i start to use it in commercial sites, i won't forget the donation to you.

(22.03.2007, 07:13)

So I'm using this to create the same flyout menu above, but with an opaque background. The problem ensues when the links become longer and line wrap. ex: "Elementary School"... Is there any fix for this? It may be caused by the hack to make <IE7 be opaque. I'm not sure. If you could please take a look at it I would be forever grateful. (also, i think this may have been a similar problem to what Titoon was having)

Here is a link to what i've been developing. The link is too long so I separated it...

Thanks again for everything!
(13.04.2007, 23:07)

Hi Stu, thx for this incredibly valuable website. I'm using this flyout menu (cut down to two levels) and am looking into adding basic tabbing accessibility for the second level. Concerning accessibility your code contains a rule for the first level (line 75/76). Any pointers as to how this could be achieved for second level (so it 'flies out' when tabbing through) ?

Thanks in advance!
(09.05.2007, 06:51)

Nimro, it is not possible to have tabbing on the flyouts. You should have the top level clickable to take you to a sub page with the drop down menu options. You will need javascript to have all the items selectable but then you will deny access to the 10% who have javascript off.
(09.05.2007, 19:40)

Thx Stu. Perhaps something for a new css pseudo class (:tabbing) lol, you saved me some hair ;).
(10.05.2007, 02:33)

Stu --

I am having trouble with this in Firefox where there seems to be underlines in the names of the menu items. It is strange even if you take out all of the css formating the unformatted item names are still underlined. This is not happening in Safari. Any ideas?

(29.05.2007, 06:04)

Just a note on the vertical flyout menus - they seem to play havoc when using DWT's for some reason.

The culprit seems to be all the IE5.5 if/endif statements.
(17.07.2007, 00:01)

Having problems moving the menu down to fit the heading. what do i need to adjust to make this work?
(17.08.2007, 23:48)

There seems to be a problem with this menu and fixed DIVs in Firefox. Take a look at There is a flicker when moving to submenus. I've seen this in Firefox on Windows and on Linux but NOT on Mac. Is this a Firefox bug? Works fine in other browsers.
(29.11.2007, 17:41)

10 of 24 comments (part 2). [ « ] [ » ] [ * ]


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