Mobile Friendly Website


Doing it with style

Simple six level 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

You're something else Stu, very nice!
(22.03.2007, 22:48)

Nothing happens ... just a vibrating menu that does not drop down. Works in FF though.

Using IE6/XP
(23.03.2007, 11:09)

Some weird bugs happen in Opera 9.02
(23.03.2007, 13:53)

Dmitry, bug fixed.
(23.03.2007, 16:21)

Works fine now in IE6 Stu. Nice menu!!!
(25.03.2007, 00:03)

1) I can't find the transparent.gif (to make IE work) on your server. Is it necessary and where can I get it?

2) If I increase the border size, the fourth sub level's position is raised a bit above its "fly" link (not what I want). I want to position the sub levels at the same height as their "fly" links, which I have been able to do for all sub levels except the fourth sub level and I can't figure out why it won't position the same way. Any tips would be appreciated!
(31.03.2007, 12:13)

John Guerin:-
Safari OS x 10.4.9 ... when I expand menus, move mouse off and release, the menu item disappears.
(01.04.2007, 07:40)

John, any better now?
(01.04.2007, 17:42)

I'm missing something, because the submenus do not appear. I have copied the tag style and the tag div id="menu_container" as well fly.gif and drop.gif, but like Nik, I cannot download transparent.gif.
Where is the problem? Thanks in advance for any tips.
Using IE7
(03.04.2007, 23:09)

Richard, transparent.gif is required in the CSS to make IE7 correctly interpret the background padding. But it does not need to exist.
The usual reason for menus not working in IE7 is that the doctype (DTD) is not valid.
(04.04.2007, 14:20)

Many thanks Stu, this solves my problem.
(05.04.2007, 13:46)

Stu, where is the transparent.gif? drop.gif and fly.gif are in, but transparent.gif isn't. What are the dimensions of transparent.gif?
(12.04.2007, 07:42)

Nik, see the answer to Richards identical question above. It is not necessary for this to exist but it is required to call up a background image for IE7 to produce the overrun padding area. You can create the image if you want, just a 1px x 1px transparent gif will do.
(12.04.2007, 17:29)

Hi, sorry i am a bit new to css so i might be missing something.
This menu is great i had been looking for exactly this for a while now but i have one small problem.

I have the menu held in a div caleld nav (just for basic layout purposes)e.g.

<div id="nav">
<div id="menu_container">
however, no matetr what the menu always appears on the left of the screen. I have tried everything possible to center the menu on the page (i.e. within the nav div) but, i am unable to do so.
Please you are my last hope. Any chance of helping me with centering the menu?

Many thanks for your time
(12.04.2007, 18:30)

Dave, if you have specified a fixed width for the top level list items then you can work out the total width of the top level menu <ul> just style this <ul> with this width and use margin:0 auto;
to center it.
(12.04.2007, 19:11)

Sorry Stu im not quite sure how to do waht you are suggesting. Any further advice if possible?
(12.04.2007, 19:26)

#pmenu, #pmenu ul {padding:0; margin:0 auto; list-style-type: none;}
is the changed i made setting it to 0 and auto and my site is using fixed widths i ebelive.
But no change has occured.

I take it i am doing soemthing wrong..
(12.04.2007, 19:35)

Dave, if you can email me the url of your page then I can take a look. stu {at}
(12.04.2007, 20:41)

Any idea why this menu fails to drop correctly in Netscape Nav 8.1.2
(15.04.2007, 22:19)

Trev, a fix for this today.
(16.04.2007, 14:55)

Should now be ok in Netscape and Mozilla
(16.04.2007, 17:29)

Stu, thats great. Thanks.
(16.04.2007, 21:49)

I can't get my script to work for Internet Explorer. Pleas help.

(18.04.2007, 23:02)

Jake, the link doesn't work.
(18.04.2007, 23:14)

Hi Stu,
Not sure if you've encountered this one, but I've noticed with the menu div you have a padding-bottom on the style; if you have input boxes under the menu within the range of the padding (in IE7) I've noticed it's impossible to click into a textbox/textarea (only tested these so far) unless you click the very left of the input box. If I remove the padding, the inputs work as normal, is there any need for the padding, it all appears to work without it, in IE6&7???
(19.04.2007, 09:51)

Oh yes, extremely sorry.

Actual link:
(21.04.2007, 05:36)

First of all, many thanks to Stu. I cannot find fly.gif or drop.gif, even though Nik wrote:-
"... drop.gif and fly.gif are in ... (12.04.2007, 07:42)." Can someone please point me to these gifs? Cheers.
(23.04.2007, 00:19)

Jake, you have no doctype declaration so the menu is working in quirks mode with the faulty box model. The padding is not 'necessary', it is there to give an overrun feature so that if you accidentally move the mouse off the menu it will not collapse. You can remove this if you wish.
(23.04.2007, 08:04)

Guy, all you need to do is look at the stylesheet and it gives you the url of the images.
(23.04.2007, 08:06)

Ah, jeez. I kept not putting in the gif file name and just going to the menus directory. Of course, all I ever got was the index page. Thx, again, Stu.
(23.04.2007, 10:05)

Hi All,

I can't figure out how to center this.

Depending on user acces, some users will only have three, or five tabs, and I'd like to have it be centered no matter how many tabs exist.

Any ideas?

(28.04.2007, 06:33)

Johnny, the next demonstration shows how to center this menu.
(28.04.2007, 23:42)

Patrick TT:-
Hi Stu, I have implemented this menu on a site I am working on, and in Internet Explorer it works fine, and Firefox it works most of the time - but not always. In Mozilla 1.7.13, it doesn't seem to work properly at all.

What is happening all the time in Mozilla, and sometimes in firefox, is that the links are moving onto multiple lines, up to 4 lines, instead of all being on the one line. Have you come across this before, and is there a fix for it? The site in question is


(24.05.2007, 06:17)

Patrick, I guess that you have used the 'centering' menu option which does have problems with Firefox. As yours is a fixed width menu (120px for each link) you can easily center the standard stylesheet. Calculate the overall width (840px) then remove the display:table; and replace display:table-cell; with display:inline;
Then style the #pmenu with the additional
text-align:center; width:840px; height:25px;
(24.05.2007, 08:08)

Patrick TT:-
Hi Stu, that worked a treat! Thanks so much, and thanks also for your site. It never ceases to amaze me what is actually possible with css.

Many Thanks

(27.05.2007, 14:14)

all works fine in IE but am having a problem in FF. I have a flash object just under the menu - but in ff the object moves down as I hover over the drop downs. Any suggestions?
(11.06.2007, 20:17)

Lucian Lature:-
Hi Stu!...

Any idea why I'm having a strange z-index bug, only in IE7, for the menu of ?...Any other browser is rendering the menu correctly.

Thanx in advance, you're doing a great job ... ;)
(18.06.2007, 21:49)

Jon Choi:-
Excellent, exactly what I was looking for!
(23.07.2007, 08:20)

Michelle Bailey:-
Stu, I would like to use two of your css scripts and am more than willing to contribute to all the time you've put into them. The two I am interested in are: A simple six level drop-down menu with overlap and overrun and A flyout menu with FOUR sub levels, overlap and overrun. I've emailed you a couple of times asking for permission and am patiently waiting to hear back.
(31.07.2007, 13:43)

Hi Michelle, I have replied to your email(s) of the 27th June and 24th July within 1 day of receiving them giving you permission to use the menus. I am not sure why you have not received these replies.
(31.07.2007, 17:34)

Michelle Bailey:-
Stu... I don't know if you are reading email right now but will you try an email again. I'm sitting at my computer.
(31.07.2007, 18:06)

Just sent a reply....
(31.07.2007, 18:19)

Michelle Bailey:-
Hmmm...our email filtering software must be blocking you. I need to talk to IT guys about this. I'm going to email you another email account in the meantime. Look for my email.
(31.07.2007, 18:25)

Amit Rana:-
I was trying to use your older version, didnt read your comment properly. I guess this is the latest one but only problem I have with the older one is as pointed out by JC above. Menue gets hidden behind flash object. Is there a work around for that?
(21.08.2007, 13:50)

Amit, see my FAQs page, item 4 for a Flash fix.
(21.08.2007, 22:50)

Chris Lively:-
Would it be better to use named classes for the sub items instead of using the selectors?

(23.08.2007, 15:01)

Chris Lively, it would not make any difference. Non-IE browsers can use the > selector but IE needs the full :hover paths to reference each sub level.
(23.08.2007, 20:20)

Pete M:-
I'm having a issue with IE6 and this script (which is incredible by the way). It works wonderfully in IE7, Firefox, and Safari, easily customized to do exactly what I needed it to do. But I was made aware of several huge problems with my site in IE6, one of which is how the script was displaying and working. While i've been able to clean up most of the incompatible IE6 code, I just can't figure out how to straighten the menu out. The site can be seen at I'm no web design expert but I think it looks pretty decent in FF/IE7 but just a mess in IE6. If anyone has any suggestions I would greatly appreciate it. Thanks again
(28.08.2007, 19:56)

Pete M:-
I was finally able to find the 1 bad line of code that was throwing the whole site out of wack on IE6, so disregard the prior comment.
(29.08.2007, 17:01)

For anyone wondering how to get this version to expand/word-wrap as per "final drop" you just need to change the height value to 'auto' in #pmenu a, #pmenu a:visited.

Thought I'd share as that took a while to find.
(22.10.2007, 13:42)

Quick question is there any way to make it so that the top-level nav items, ie Home, About us, Products, etc. don't have to have the same width? It's probably dead-obvious, but I'm totally missing it.
(13.12.2007, 19:33)

How do I get long text strings in the submenu items to wrap elegantly? At the moment they wrap but the new line appears like a new paragraph. It aligns all the way to the left of the box (ignoring the text-indent: 5px), and is too far below the first line - like a <p> instead of a </br> . See what I mean at . I want it to look more like the text in your menu at I'm sure there's a simple CSS fix for this. Anyone know?
(22.01.2008, 04:46)

nevermind thanks! it was a doc type issue.
(29.02.2008, 02:56)

George Sepe:-
I tried to implement your 6 level menu and it works successfully in my html software program. When I put it onto the net, the bullet indicators do not show up. I have IE ver7. Here is my website... Can you take a look at it and give me some advice...!
(10.03.2008, 18:02)

George, you have more problems with IE6 and Firefox etc. Email me stu{at}
(10.03.2008, 18:55)

How do I get this menu? Do I just right click and get the code from there or do I download the code from somewhere else?
(03.04.2008, 21:38)

it is possible to have the flyout menu flyout to the left instead of right ? how ?
(27.05.2008, 06:15)

Thank all that is Good and Sane that I found this page. It is a beacon of hope for newbie XHTML fools like me. Please keep up the great work.
(22.07.2008, 06:48)

Sean D. Feeney:-
Hi, Can anyone tell my why the dropbox works in every browswer except for IE7 on
(04.10.2008, 20:40)

Sean, it is a condition of use that the copyright comment is kept in the stylesheet.
The menu probably fails in IE7 because you have placed it inside a table which does not have a relative position/high z-index so the menu is dropping beneath later content.
(04.10.2008, 21:28)

Great site! I've used this menu but where I have menu items that are too long for the line (text wraps over) the second line of text displays slightly left of the first line. how can I change it to be directly below top line?? I used one of your other menus (menu #3 on "Drop down examples") and it does it perfectly, but I can't figure out which bit of code relates to it or what to change? Thx!
(12.11.2008, 10:31)


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