Mobile Friendly Website

CSSPLAY

Doing it with style

validating drop-down 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

Wible:-
Bravo! You continually impress and inspire me.
(06.03.2006, 23:12)

Stu:-
Wible, thank you, but this is not the end...I am busily updating this to use an unordered list only for non IE browsers. Placing the table info within the conditional comments. This way it will degrade correctly to an unordered list. Watch this space.
(07.03.2006, 09:53)

Stu:-
I will be posting a rewrite of this tonight which will be even more user friendly.
(07.03.2006, 14:56)

Brett:-
Stu,

You are a magicican!!! Just don't go POOF on us!
(07.03.2006, 23:18)

Jeff:-
It looks like there is still one flaw with this menu that I have also had in one CSS menu I use. In IE7 (and I'm assuming maybe other versions of IE), I guess the menu does not take a higher z-index than the container immediately below it. So when you pull down a long menu, it dissapears behind whatever happens to be just below it; in this case the google ad bar.
(10.03.2006, 16:05)

Stu:-
Jeff, IE5.5 and IE6 both work fine. IE7 is not yet an official release and may still have 'bugs'. Opera 8 also suffers from the Google ads, but Opera 9 fixes it. The Google ads BTW will be in an <object> </object> for IE7 but not for IE6 or IE5.5. This is because the conditional comments are for less than or equal to IE6 so IE7 will see the Firefox & Opera code. You could try the conditional comments to include IE7 and then see if all is ok.
(10.03.2006, 16:41)

trond:-
Amazing work. Fast and all. This is true crossbrowser menu?

Will it be possible to make this menu as a vertical menu without to much hazzle? I am as you might c noob to css, but this menu as vertical would be my nighttime fantasy.
(12.03.2006, 19:38)

Stu:-
trond, if you hit the 'previous' link top right of the page you may get your night-time fantasy ;o
)
(12.03.2006, 21:48)

Geoff:-
Very, very nice. I had been studying your earlier version, which was efficient but perhaps a bit complex for easy use as an include. This is much tighter and far more elegant... breathtaking in fact.

The flyouts are a marvelous touch; eat your heart out, Macromedia!

What I'd like to see sometime is css that on hover/click opens a secondary "page" within the same window, perhaps in a fixed location, is overflow:auto, and can pick up included html. It would permit a single web page to carry an enormous amount of supplemental information.

But this will do for now -- it's lovely!
(16.03.2006, 23:58)

Stu:-
Geoff, I will work on it.....
(17.03.2006, 00:07)

miguelvideosub:-
Excuse me about my english Stu.I will like to ask you permision to use drop down menu, and I have already put a link of your page in my web, www.miguelvideosub.net. Thank you for your web..
Gracias por su trabajo y me inspira mucho en mi aprendizaje. Todavía soy novato pero me parece la mejor web de css que he encontrado. He puesto ya el enlace a su web como exije, y quisiera permiso para usar el menu (siempre que me funcione, claro..) Un saludo , atentamente Miguel.
(17.03.2006, 20:02)

Stu:-
miguelvideosub, you have my permission, thanks for asking.
(17.03.2006, 20:08)

miguelvideosub:-
Thank you very much.I will try , and see what problems I find. Thanks..
(17.03.2006, 20:33)

Ronald L.R. Verdonk:-
Stuart. Thanks for a great tool! I put some money in the kitty and your logo on my site.
I just have one little problem, which is probably due to my own changes (button sizes and removal of some drop-down lists): when I move my cursor from the top-list to the drop-down list I have to be very quick or the drop-down will disappear. I have been looking at this for some days now and I can't seem to pinpoint the cause. Could anyone out there give me a hint? Thanks in advance.
(19.03.2006, 17:17)

Ronald L.R. Verdonk:-
Sorry I forgot: I am running IE6.
(19.03.2006, 17:18)

Stu:-
Ronald, you probably have changed the height of the button (20px) and the absolute top position of the .menu ul li a:hover ul (21px) If you have a gap between these then the :hover will be lost.
(19.03.2006, 17:27)

Ronald L.R. Verdonk:-
Thanks Stu. You are right, it is something like that. The only size I changed was the pixel in the ".menu ul li a, .menu ul li a:visited" definition from "1px" to "0px". Changing it back to 1px made it work again. Thanks again.
(19.03.2006, 19:10)

Marko Van Vacer:-
Simply brilliant. Only issue now is how to remove the visited border when returning to the menu page?
(20.03.2006, 15:58)

Dimmy:-
Nice menu is it posible to make it "drop up" from bottom to top? I have a design that is runs on MODx Content managment system and the menu is generated by a pice of code. I like to have my menu at the botom of the page and the menu being pulled up I tryed it a bit here in firefox I get some results but in IE its a mess: wise.kinghosting.nl.
(20.03.2006, 23:51)

Stu:-
Dimmy, yes it is possible ;o)
(21.03.2006, 00:02)

Dimmy:-
Stu, could you show me how? I am fighting this for 3 weeks now. dimmy[at]hilverda[dot]net
(21.03.2006, 06:56)

Stu:-
Dimmy, 3 WEEKS??? I will put another page on tonight if I have time. In theory it should only take a minute ;o)
(21.03.2006, 08:54)

Paul G:-
Stu

Excellent work and I would use this except that on my form I need a div of drop down day, month and year (select/option) just under the menu. In mozilla the menu overlays the ddls perfectly but in ie 6.0.2 the menu goes behind the select. Any work around or do we have to wait until ms get ie more css2 compliant ?
(21.03.2006, 09:01)

Stu:-
Paul G, I believe that this is a bug in IE6 such that forms are always on the top. So I think that any drop down menu may suffer from this problem.
(21.03.2006, 09:16)

Stu:-
Paul G, why not try the 'pull-up' menu coming soon....
(21.03.2006, 09:17)

Dimmy:-
Stu, that would be great I have not seen it on the internet yet without the hover anything hack
and even with that pice of code I did not get it to work, wil it also work if a li is not a link? just a li:hover with an list embedded that has links?
(21.03.2006, 12:27)

Dimmy:-
Man i ask to much sorry
would it be posible that the borders of the boxes are transparent? sorry again just wondering if the background would be visible between the menu elements.
(21.03.2006, 12:38)

Stu:-
Dimmy, trying to complicate things eh? First question...it is posibble to have more than one link in a list item but it is not possible to have a <li> which is not a link. li:hover does not work in IE. Second question... transparent borders are not available on IE so this rules out having the background visible between links but it maybe possible to use padding to space the links.
(21.03.2006, 12:50)

Dimmy:-
Stu, Thank you for this clear answer and sorry for spamming your site like this. How is the Pul-Up Menu chalange, is it still doable?

Greets
(21.03.2006, 22:33)

Stu:-
Dimmy, the pull-up version has been posted for a couple of hours now. Have a look at the latest menu in the 'MENUS' list. Hope this gives the information you want. Basically all you do is change the absolute positions of the submenus.
(21.03.2006, 22:47)

Graham:-
Love the menu, I have been looking for something like this for ages. Unfortunatly I cannot get it to work with IE. I have put an almost exact copy of your menu on my site www.oceanliving.org/testdrop.html but cannot get the sub menus to appear in IE, in Firefox they work just beautifully. Any hints where I am going wrong?
(22.03.2006, 01:57)

Stu:-
Graham, you are not using a standards compliant !doctype. If you want html 4.01 transitional then you should choose the one at

www.w3.org/QA/2002/04/valid-dtd-list.html

Use this and it should work.
(22.03.2006, 08:33)

Graham:-
Thanks Stu, I'll give it a try later today. Thanks again for the excellent work.
(22.03.2006, 17:11)

Alex aka SiNuX:-
Konqueror v3.4.3, linux dosen't go over advert on page.

Other than that it works great.
(24.03.2006, 12:36)

Sam Gill:-
I've driven myself mad trying to work out the cross browser dropdown cascading validating menu! please send me the files that makes this work. I would very much appreciate it. Many thanks, Sam Gill
(28.03.2006, 22:46)

Stu:-
Sam, there are links to the two css file and the xhtml on the demo page. Just copy these, use a standards compliant !doctype (see above) and link to the external css files as I have done (see demo page) and it should work.
(28.03.2006, 22:53)

Josh:-
Your menu is great, I only have one problem how do I implement it within a table. e.g.
<table><tr><td>menu code</td></td></table> it works in firefox v1.5.0.1 but not IE6. In IE6 the drop down functionality ceases to exist.
(29.03.2006, 01:46)

FrankNL:-
In Netscape 7.02 on my OS-X the content is dropping down with the menus. Maybe this is fixable.
(29.03.2006, 17:11)

Jimmer:-
These menus don't show up at all in MSIE 5.2 for Mac OSX.
(04.04.2006, 22:21)

Stu:-
Jimmer, you are quite right.
(04.04.2006, 22:43)

Stu:-
Jimmer, but you should get the top level item which is should be a link to the main page. This should then have the sub menu list repeated.
If the menu is structured correctly you should be able to navigate using the top list only.
(04.04.2006, 22:46)

HDOGG:-
Stu-

Love this menu and your work!

I am trying to modify this menu to use as to display names/addresses. I am using the top menu as A,B,C...etc...The drop downs are the peoples names and the flyout is a 'business card' with basic info.

The trouble I am having is making the top menu widths smaller without affecting the other elements. Can you suggest a way to do this?
(24.04.2006, 03:20)

Stu:-
HDOGG, if you look at the pull-up menu you will see how to change the widths of the varous sub-levels.
www.cssplay.co.uk/menus/upmenu.html
(24.04.2006, 11:48)

Stu:-
HDOGG, you would be better off using the mk.3 version which allows multi-line text.
(24.04.2006, 11:49)

Maarten:-
I'm trying to use the menu in a site but have a problem with it in IE

When you have a small window, the buttons come in 2 rows)
now if you go to a button where a drop down menu is, it drops down but behind the button that stands there so you can't click the dropdown menu items.
In FF I solved this with z-index, but in IE that doesn't work.

Does sombody know a solution??
(24.04.2006, 15:39)

Avasilcai Daniel:-
i look up for this menu,
thank this solution is realy cool. no js only css, this is perfect.
(13.05.2006, 05:06)

Lee:-
May I have permission to use this menu on an edu site ccdb.hypermart.net/BIRNDEVWEB/TEST-SITE/birntest_TEMPLATE_HOME_2col.html
Also, menu goes under item on page on a MAC - any fixes?
Lee
(19.05.2006, 17:46)

sorpresina:-
how can i have multiple submenu?
In the example there are only two levels, what to do if I want more sub-levels
(26.05.2006, 14:19)

Tomas:-
I have the same problem of Maarten....

"When you have a small window, the buttons come in 2 rows)
now if you go to a button where a drop down menu is, it drops down but behind the button that stands there so you can't click the dropdown menu items.
In FF I solved this with z-index, but in IE that doesn't work. "

Any idea?
(09.06.2006, 09:28)

Cameron:-
Wow. I'm impressed with this menu. but I'm having a little trouble. If ive visited the page that causes the dropdown, the sub links wont show up. any suggestions?
(22.06.2006, 22:25)

ell:-
Is it possible to use the mkII menu with an image nav bar
(28.06.2006, 04:50)

djvd:-
@sorpresina,
I've got the same problem and I struggled my way through. Here is my solution www.djvd.nl/test
(19.07.2006, 23:30)

Stu:-
djvd, any number of levels is possible, it just becomes more difficult to style it especially for IE. Other browsers could just use child selectors and it would be simple.
(19.07.2006, 23:40)

Sven:-
Hi Stu,

I've a problem in IE too. I copied both the css-files, but the menu doesn't work in IE. If I look at your site with IE, it works, if I have it in a blank page it doesn't drop down.
(27.07.2006, 08:36)

Stu:-
Sven, check that you have a valid !doctype (DTD)
as the first line of your page.
See my home page for a link to w3.org standards compliant doctypes.
(17.10.2006, 07:58)

Tim:-
I haven't been able to get the top level buttons to line up horizontally.

www.thanko.info/index_test.php

Otherwise, I really like this menu system.
(19.12.2006, 13:22)

Stu:-
Tim, no need to post twice.
In your main css file you have
li {width: 800px;}
This is affecting the .menu li width
(19.12.2006, 17:10)

Tim:-
Thanks, Stu.

Sorry about posting twice. I thought I had lost the first post somewhere along the line, therefore posted again. Sorry for the inconvenience and thanks for the help.
(19.12.2006, 18:12)

Tim:-
One more question. Is it possible to have another level of menus? I have one spot on my page where I go to a third level. If so, how could I implement this?

Also, if I can make this last detail work, may I use your MKII menus on my site? What would you like for a link and where shall I put it?
(20.12.2006, 02:45)

Stu:-
Tim, this one has three sublevels:
www.cssplay.co.uk/menus/final_drop2.html
If yours is a personal site then just keep the copyright comment in the stylesheet.
(20.12.2006, 12:54)

Devin:-
I cant get background-image to work even if i wrap the menu with another div.
(17.01.2007, 17:50)

Elizabeth:-
I have been playing around with your menu code and it works great... in firefox - in IE, the last 2 entries in the dropdown of the middle item in the menu display the text from the first entry in that list... I took a screen shot of each browser and can e-mail them if this is not clear - ever run into this before?
(13.04.2007, 15:33)

danie smith:-
Hi Stu

Great menu system, it really is the best I have found. I wondered if there is a way to make the width of each top level button match the width of the text it contains.

Currently all buttons are equal widths and if you have a mix short and long words, this wastes space horizontally. Obviously there is no need to apply this to the dropdowns, it is best to have these all the same width.
(07.08.2007, 15:22)

Stu:-
danie, check the rest of the drop down series on css play. There a plenty with variable width top level links.
(07.08.2007, 17:24)

Amit Rana:-
Does not work on Opera 9.22, has anyone tried on Opera?
(19.08.2007, 08:03)

Stu:-
Opera 9.22 appears to have a bug. This has worked in all Opera 9 versions so far.
(19.08.2007, 08:39)

Stu:-
Luckily this is a very early menu in the series and should not be used. It is here just to chart the progress of my menu system. Later versions of the menu have no such problems. It is a little odd though and I will investigate. In Opera 9.23 if you hover over any top level item you get a brief flash of the dropdown sub level, then if you scroll the page so that the menu is off the top, then scroll back the menu vanishes.
(19.08.2007, 08:58)

Stu:-
Amit Rana, it is now working again in Opera 9.22 and 9.23
This is a rather obscure bug. Removing the margins from the outer .menu div cured it.
(19.08.2007, 16:28)

Amit Rana:-
Hey Thanks, that was pretty quick. Now I noticed another thing, if you have a flash object below your menu the drop downs will not show. Actually you can notice this on the demo page as well. In the menu "DEMOS" I cant see any menu after "ImageMap" similarly Mozilla menus is not showing full. I can send screenshot if you need.
I am browsing using Fedora/2.0.0.6-3.fc8

out of topic- Isnt there a way we can get notified if a comment is added here?
(21.08.2007, 13:09)

Amit Rana:-
Sorry, I noticed I didnt give correct detals. Browser is FireFox 2.0.0.6-3.fc8
OS- Fedora8
(21.08.2007, 13:40)

steve:-
I modified the menu so only one link has the dropdown. I want to highlight this link after a sublink is selected but I can't make it work in ie6. All other browsers but not ie6. I've tried giving the link: id="selected", <li class="selected"> but then the drop down doesn't drop down or the links in the drop down don't work. Is there a work round? Thanks.
(16.10.2007, 06:00)

Daniel:-
Where do I get the code?
(15.06.2008, 16:06)

Jerry Tucker:-
Is there a way to have the menus pulldown in front of an embedded Flash movie that resides below the menu?
(20.08.2008, 19:44)

Jerry Tucker:-
I am experiencing an issue where there is a Flash movie directly below my menu, the pull down becomes hidden behind the flash particularly on PC IE. Is there a way to reverse this, or any other alternatives?
(24.08.2008, 21:20)

Victoria:-
Hello - I love this menu. I recently changed the background image scaling algorithm on my front page, and now my menu sits above the image - Can you suggest a correction? Thanks, appreciated! Victoria :-)

victoriasjourney.com/
(03.09.2008, 23:22)

sefat:-
i wanted to use this menu in my current project..but i cant seem to align the text to the left...the anchor texts are always center aligned...i tried with inline style..but it didn't change..isn't it weird or im missing something?
(24.01.2009, 16:42)

Stu:-
Remove the text-align:center; from the .menu ul li a, .menu ul li a:visited styles.
(24.01.2009, 17:04)

sefat:-
howcome i didn't notice that rule?damn..!!
Its perfect now..thanz a lot..:)
(24.01.2009, 17:18)

Dave:-
in FF on MAC (I haven't looked in other browsers), why is it that when the link title shows the drop down disappears when you move the mouse again? Is this something that could be fixed without taking the titles off the links?
(26.07.2009, 14:01)

Ben:-
Shame the page doesn't validate... One of the links - there is no target attribute.
(22.03.2010, 08:23)

Stu:-
This is down to a third party link over which I have no control. The menu, however, does validate, although this one is very old and should not really be used as there are many more recent menus that are easier to implement.
(22.03.2010, 10:15)

Laura:-
Stu - thank you so much for this site. I created a test dropdown menu using your code and it works fine in Chrome but not in IE8, and that's even after I added the line about IE7 emulation as you suggested in your FAQs. Your help would be greatly appreciated. Here's the page:
LMA.com/dipoa/contact.htm
(26.05.2011, 03:11)

Laura:-
Stu - I did get my test menu to work in IE8 by just saving the source of your demo page and then editing it. But there is a HUGE gap between the menu and the body/content section (the editable portion of the DWT). How do I close that gap? LMA.com/dipoa/stu-test.htm

Thanks in advance for your help.
(26.05.2011, 03:36)

Stu:-
As stated on this demo page, this is a very old menu and as such uses methods that are not easy to modify, two stylesheets for instance and extra markup for IE6.
You should look at the latest dropdown menus as suggested on this demo page.
(26.05.2011, 08:11)

Laura:-
Thanks, Stu. Yes, I have looked at all your other demos. Can't find one that is just like this one unless I've overlooked it. I really like this old menu the best. It's clean and simple. And easy to read, unlike fancier ones with gradiant shading or translucence where you can see the page image or text behind them (makes the menu harder to read). This one's an oldy but goody, Stu! If you have a menu just like this that works reliably with IE8, I would love a link to it. Again, thanks so much. You are a very talented menu designer!
(26.05.2011, 13:49)

Laura:-
Let me rephrase something: You can obviously get it to work reliably in IE8. I just need to know what I'm doing wrong, or where I can find a "newer model" version of this same menu (or something very close to it). As always, your donation of time and willingness to educate are greatly appreciated.
(26.05.2011, 14:06)



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