Mobile Friendly Website

CSSPLAY

Doing it with style

ultimate dropdown 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

mary:-
Stu: You can change the "maybe works" on Mac browsers to a definite yes for Firefox 1.5 and Safari, and the expected definitely not for IE 5.x
(07.04.2006, 16:21)

Stu:-
Thanks Mary, I have added these to the list.
(07.04.2006, 16:38)

Stu:-
I must apolgise to everyone who has downloaded the (x)html and css file for this demonstration. The links were pointing to my previous example files.
I have now corrected this so you can now download the right files.
(08.04.2006, 21:11)

Todd Reid:-
Stu: You can also add Netscape 7.02 and Opera 8 for Mac to the list of browsers that this works on...

Todd
(10.04.2006, 13:27)

Stu:-
Internet Explorer 7 anyone?
(10.04.2006, 23:46)

Todd Reid:-
Internet Explorer 7 = YES!!!
(11.04.2006, 14:45)

Stu:-
Cheers Todd. The conditional comments work for IE7 + non-IE browsers.
(11.04.2006, 15:06)

Erik:-
Let me start off by saying this is one of the best websites concerning CSS techniques, but you're probably hearing this day in day out. This is definitely some of the craziest, innovative work I've ever seen done with CSS. You're taking it to the next level.

'THE ULTIMATE CSS ONLY DROPDOWN MENU' looks mighty fine. Here is one more neat challenge for you (although I doubt you'll find it challenging, it is to us CSS newbies however!). What about adding opacity to it. That's a sweet effect, I've seen you do it on some vertical flyout menu here on this site, so I doubt it'd trouble you. And here's the harder part: what about making it so the menu is flexible? For the people using a fluid layout, it breaks when the browser is being resized, due to the drop down menu being fixed. If you can get that done, it'd definitely be worthy of the name: Ultimate Super Duper Ultra Drop Down Menu. Ha!

Well, other than that, major props and keep up the awesome work.


Sincerely yours,
Erik
(12.04.2006, 17:40)

val:-
Hi, I love this but the xhtml link is not working at all.
(12.04.2006, 21:38)

Stu:-
val, all the links work for me.
Which one(s) are you having problems with?
(13.04.2006, 08:08)

val:-
So I click on the part that says something like "the html text is here" and it takes me to a place that has a list of links that say "drop down menu", "cascading menu", "content:" and so on. and when I click any of the links it sends me to the error page.

Thanks for the help Stu.
(13.04.2006, 19:52)

Stu:-
val, which browser are you using? The links at the bottom of the demo are correct for the xhtml and css. The menu links are also correct.
(13.04.2006, 20:17)

val:-
I'm using Internet Explorer (have no idea what version) but the xhtml link worked when I clicked on the Cross Browser CSS Slideshow so I have some hope that it can work for me.
(13.04.2006, 21:18)

Stu:-
val, for some reason IE is treating normal text as html. Just view the source code to see the xhtml.
(13.04.2006, 22:53)

Dave Bergschneider:-
Looks awesome in ie7 Stu.
(18.04.2006, 16:31)

Dave Bergschneider:-
Hey could you give me a tip on positioning one child ul in IE. I managed to position it to the left in FF but not ie. Here's the link truimage.net/dave . No worries I will be posting you awesome site in my resources > links section as well. Just need to get my template squared away.
(18.04.2006, 16:34)

Stu:-
Dave, you need to style .ctform in the IE css in the same way as you have for non ie style.
(19.04.2006, 08:12)

Sue Hutton:-
Stu, thank you very much for all the work you have done, and the examples that you have provided. Does your family ever see you?

I have finally managed to implement your dropdown menu, cursing all those conditional comments for IE, but sadly, there is a gap between the main ul list and the dropdown. I think this is probably something to do with design rather than your menu, but if you have any ideas with which you could spark my imagination, I'd be immensely grateful.

You can see the page at suehutton.co.uk/trial None of the links work at the moment. I am in the throes of re-designing the site to try and meet accessibility requirements. I drafted the present site four years ago when I was struggling to comprehend CSS.

Needless to say, you will get an acknowledgement when the whole site is up and running. Thank you for your help.
(19.04.2006, 13:25)

Sue Hutton:-
Hi Stu, I'm back. I found a gremlin in my code, an extra </td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]--> which I hadn't spotted. This still didn't resolve the problem of the dropdown, until I changed back the height and the line-height in .menu ul li a, .menu ul li a:visited to 3 em.

Now it works. But I'm using a different font from you, and so I'm going to have to look carefully a the measurements that have been set in the CSS file, and see what I can tweak.

All the best. Sue
(19.04.2006, 15:38)

Jared Beck:-
Thanks Stu, I will be using this at work. (Tompkins County, New York)

I had to made my donation personally, but my boss is going to pay me back by buying me lunch.
(19.04.2006, 16:56)

Ray:-
Thanks Stu, I am using this in my website right now.

I had to make a few changes to it(color, width, height, etc.)and had no problem doing so.

Thanks a lot!
(22.04.2006, 03:45)

Chris Klaus:-
Hi Stu,

This is a great piece of work. =)

I'm trying to get the sub drop down menus to overlap. Thinking this would be easy, I made the following additions / changes to final_drop_ie.css:

.menu ul li a:hover ul {
z-index:20;
}

.menu ul li a:hover ul li a:hover ul {
left:130px;
z-index:30;
}

I also made similar changes to final_drop.css.

My initial testing indicates this works nicely for non-IE browsers, but for IE 6.0 the sub drop down menu only partially overlap. Would you know why this is happening and better yet how to fix it?

Thanks!
(24.04.2006, 18:29)

Stu:-
I know that this happens and it is due to the z-index of the menu structure. It MAY be fixable in IE but I haven't tried.
(24.04.2006, 18:51)

cocane:-
hi guys, just wanted to give my comments on this marvellous piece of css.
First: its awesome how you made this all working with css only.
Second: just in case you didnt try, put a select-box somewhere in there. it messes up everything on opera (when selecting) and on msie the selects dont dissappear after hovering out.
sad sad sad! but not your fault.
(25.04.2006, 11:15)

Paul Trivilino:-
Hi Stu,

Very nice work on the menu. One question for you though: Has this menu be tested in any browsers on a Macintosh computer? I just check out "The Ultimate CSS Only Dropdown Menu" using the following browsers in Mac OS X 10.3.9 with the following results:

Safari 1.3.2 - Works Great!

Netscape 7.2 - Dropdowns appear okay. When I mouse down to the links below "image map for detailed information", however, the dropdown for DEMOS disappears. The same thing happens with "shadow text" under MOZILLA. Could this be a Z-Index problem with the ads that appear below these links?

Firefox 1.0.6 - Same issues as Netscape 7.2.

Internet Explorer 5.2.3 - Dropdowns do not work at all.

Opera 7.54, 8.54 -Dropdowns appear okay, except that the links below the "fun with background images" link appear behind the ad. Again, is this a Z-Index issue?

Are any other Mac users experiencing these problems when using this menu with these browsers?
(25.04.2006, 15:40)

Chris Klaus:-
This seems to be a nicer solution for resolving common z-index issues.

.menu ul {
z-index:70; /* Top level menu items. */
}
.menu ul ul {
z-index:80; /* Main drop down menu items. */
}
.menu ul ul ul {
z-index:90; /* Sub drop down menu items. */
}

Unfortunately this won't allow you to overlap sub drop down menus on top of drop down menus. I spent quite a bit of time trying to resolve that problem without finding a solution.
(27.04.2006, 21:38)

Anonym:-
Hi! I absolutely love your ultimate dropdown menu and I have been studying the CSS code for the past several days to try and adapt it to my website. I am wanting to make the width of the menu shorter, but everytime I try to make these changes I get an invalid error with dreamweaver. Hmmm...if you have any small hints as to how to make the total length 495px and shrinking each menu button equally to fit that length, that would be REALLY awesome. As soon as I can get this to work, I will be making my donation!

Thanks so much!
Heidi
(02.05.2006, 02:20)

Aaron:-
Hi,

This is a great css help site.
Also wanted to let you know this menu does not work with IE7.

Thanks.
(02.05.2006, 11:47)

Stu:-
Aaron, it was confirmed as working in IE7 beta on 11th April 2006 so I don't know why it would not be working now.
IE7 will use the li:hover the same as all non-IE browsers.
Can anyone using IE 7 beta X advise if this works or not?
(03.05.2006, 14:28)

Tobias Berben:-
Hi, I really like this menu!
But, is there a possibility to ad another sub-sub-menu? I would like to have a menu with four levels ...

Regards, Tobias Berben (Hamburg, Germany)
(11.05.2006, 11:44)

Mike Lane:-
Okay, this is another menu where I'm confused. You say in the description for the xhtml part of this menu, "The other browsers will not see the tables and instead will use the normal unordered lists." But when I use the webdev toolbar to view the element information (in firefox), the table elements are an ancestor of the menu options of the dropdown list. I'm not trying to spam :D just trying to understand. Was this intentional?

Thanks again!
Mike
(12.05.2006, 02:01)

Stu:-
Mike, this is what comes of copying one page to make the next. I didn't check the xhtml bit and, as you have spotted, it is not correct.
All browsers will see the tables, but they are styled such that they play no part in the look of the menu.
I will correct this tonight.
(12.05.2006, 08:13)

kriss:-
this looks brilliant! haven't yet had a cjance to play with it, but i will. I just wanted to know though - why if it's strictly css, does it need the table on each menu? can this be done with divs instead??
(16.05.2006, 04:06)

Stu:-
kriss, this HAS to be tables and is the basis for the working IE menu. Because IE only recognised the :hover pseudo element on links then for this to work inIE we need to nest links.
Now this would normally not be possible, BUT if the put the nested links into a table then IE (for some unkown reason) will recognise the inner links and the outer links.
So tables will work but divs wont.
Non-IE browsers used :hover on nested <li>s so these are not affected by the tables.
You must, however, style the tables so that they play no part in the menu layout.
(16.05.2006, 07:57)

jensen:-
am browsing your very informative and excellent site via the IE7 version 7.0.5346.5 beta 2 and not a single problem detected.

book marked
(18.05.2006, 03:52)

Roy:-
This is a great piece of work stu. I have attempted to create a menu which works but is there any way I have different column widths for the various drop down menus? If I change ".menu ul li a, .menu ul li a:visited" all my columns change width. please help...
(18.05.2006, 12:03)

Stu:-
Roy, you will need to create extra style classes for the different width and add these to the (x)html.
(19.05.2006, 10:30)

Roy:-
Thanks for your reply stu. Do you have any examples on your site of this or an example, I am really new at all this. Thanks anyway
(19.05.2006, 22:55)

Vitaly Sharovatov:-
Hello Stu. Great work, thank you! How did you know that links can be nested by wrapping them in table? However, really nice solution! By the way, is there a chance of making all menus stretching to their content?
(20.05.2006, 12:30)

Steve:-
Hi just tested this under ie 7, and it (sorry to say) does not work properly.

What happens is the drop down appears behind the body copy text, eg the "drop down menu templates"
(28.05.2006, 13:48)

Stu:-
Steve, this is a bug in IE7 which, hopefully, they should correct before the final release. It does not happen in IE5.x or IE6.
(28.05.2006, 18:54)

kristarella:-
I've been searching for dropdown menus for my blog (for archives and blogroll etc). This is by far the best example that I've seen. When I tried to use it in my sidebar it seemed to break the images below it so that my background images didn't keep repeating down the page but they attached to the menu and the footer was attached to the bottom of that as well.

Hope that made sense, any idea why this might happen?
(29.05.2006, 12:23)

kristarella:-
Never mind, I just didn't end the tables etc. Silly me! I've nearly got it working, need to play with the CSS to get the look right.

Thanks!
(29.05.2006, 12:55)

kristarella:-
This is totally awesome! You rock.
(30.05.2006, 02:32)

kristarella:-
Ok, I'm sorry for keeping on posting comments. My menus don't work at all in IE, in fact my whole site is messed up in IE and I'm not sure how to fix it. I'm using Wordpress and their links manager which means that for the list links I'm using a php command to get_links. Is it the 'nested tables and nested links' in IE that break the menus? I'm still have IEv6 cos I don't love beta versions. You can see my site at www.kristrella.com/blog
(30.05.2006, 03:07)

Jerome (FR):-
(Problem report)

Thanks a lot for your works Stu.
Ultimate dropdown menu is on my website now.
This is the best thing a webmaster could be expecting to.

Ok, But something is wrong with it:
I noticed that if there is a .SWF movie under the opened menu , the part of the menu that is on the SWF completely disappears.

Could this be fixed?
I already knew this problem with another previous javascript menu css (from Iubito's).
(01.06.2006, 13:04)

David:-
Tested in:
Internet Explorer 7.00.5296.0 (winmain(wmbla).060125-1505)
a.k.a.
Internet Explorer 7 Beta 2

Works perfectly.
(06.06.2006, 02:29)

Will:-
Very cool.

One pedantic point though. To future proof the script, wouldn't it be better to use [if gt IE 6] rather than [if IE 7]?

Of course, this assumes that IE 8 will be at least as Standard-Compliant as IE 7, and that it won't take Microsoft QUITE so long to bring out the next version ... :-)
(13.06.2006, 16:14)

John Nicholls:-
Hi Stu

I'm almost ready to donate!

Is it possible to get the menu to slightly more user friendly when someone moves their mouse diagonally from a hovered menu item (across the top right of the menu item one below) to the opened sub-menu items?

On www.positioniseverything.net/css-dropdowns.html, when sub-links are opened, a small area on the top right of the next main link loses the hover detection so that when the mouse passes diagonally across it, you get to the sub-links you wanted and do not open the sub-links of the next main link. If you try it, you'll see what I mean!

You have an ever improving site. Keep up the good work.
(15.06.2006, 11:20)

Juan Fernandes:-
I tried noth your super dupa menus here: www.multicreativemedia.co.uk/dev/mcmv2/index2.asp

Anyways, as you can see the Flash gets wipes the drop down menu.

Is this a bug or something I have done wrong?

Thanks
fernandes(dot)juan(at)gmail(dot)com
(26.06.2006, 22:27)

Stu:-
Juan, have a look at www.cssplay.co.uk/menus/drop_examples.html
at the bottom of the page is a link to solving flash problems.
(26.06.2006, 23:02)

Albert:-
Still Valide in IE7.0.5450.4 beta 3.
(24.07.2006, 15:04)

Scott Fiesel:-
Stu, thank you very much for putting up this site, it's helping me to wrap my mind around the various ways CSS can be used. Now the questions:

Why do you use tables in your CSS? I've stripped them out, and it doesn't seem to have any affect. Is it a browser hack?

In the HTML, what does the <!--[if IE 7]><--> comment do? Doesn't the browser just skip over that line?
(25.07.2006, 21:55)

Stu:-
Scott, have you tried it in IE5.x and IE6 with the tables removed? The tables ae required to make IE 5.x and IE6 recognise the nested links. Other browsers do not require them.
The conditional comment is not a normal one, this is my hacked version which IE7 AND all non IE browsers WILL see but IE5.x and IE6 will not.
(25.07.2006, 22:07)

geoff:-
this is very elegant, but unfortunately does not work well in Firefox. Any linkage under the space occupied by the total table space occupied by the menu div does not function, even if z-indexed higher -- they seem to collide and the menu supercedes. Sorry, back to a js pull for firefox
(18.08.2006, 14:06)

Stu:-
geoff, not entirely sure what you mean but this menu system does work in Firefox.
(18.08.2006, 15:14)

geoff:-
Stu - sorry for lack of clarity. The css menu definitely works in Firefox, but any undrelated links (standard text or images) within the vertical boundaries of the table for the dropdown itself no longer function -- no matter what the z-index of the links.

The same links will work just fine in IE but go "dead" in firefox. If the menu is removed, those links work okay again.

It's a very nice menu concept, really, really smooth, so this was a sort of sad discovery.
(18.08.2006, 18:21)

Stu:-
geoff, I think I see what you mean. I have added some text beneath the menu which includes a link, and that appears to work ok on Firefox as does the link ad image to 13styles.com and the google ads.
(18.08.2006, 18:52)

geoff:-
stu-- thanks. clearly I'm creating some sort of conflict with unrelated css/code. I'll go back and start from scratch to see if I can hit a point where it fails (or perhaps doesn't!)

thanks... and collectively, very, very nice work. It's stunning.
(18.08.2006, 19:00)

Stu:-
geoff, ok, let me know if you find the answer. Also, the next menu in this series is even simpler than this one.
(18.08.2006, 19:23)

geoff:-
stu - following up....it looks like the problem occurs when the unrelated link - in my case, a small graphic - is css positioned (relative or absolute) within the space that the pulldown would occupy. Sort of like the mouse pointer can't decide which link takes precedence. If there is no positioning, then the menu layer, when open, dominates.
(18.08.2006, 19:28)

Stu:-
geoff, mmm...still don't see it. I have added position:relative to the text link and a CSSplay button which is positioned absolutely. Both of these still work, as does the menu.
(18.08.2006, 20:53)

geoff:-
Stu - thanks. On my firefox browser, the cssplay button does not appear to be a link (on hover, click, there is no reaction). Firefox 1.5.0.6
(18.08.2006, 21:07)

Stu:-
geoff, very odd. I have v1.5.0.6 and it works perfectly as a link.
(18.08.2006, 21:13)

geoff:-
Stu - thanks; perhaps it's something related to the specific configuration of the Firefox I was using on a different computer; on this one, your test graphic link works just fine.
(19.08.2006, 02:05)

Stef Arts:-
Could somebody please help me? I'm trying to add a third level submenu, but is really not working. Could somebody tell me how to use the css in combination with ul's & li's?! Does somebody have an example which i can implement in the current css of this script?

Thnx anyway
(24.08.2006, 01:15)

Stef Arts:-
I'm sorry that i bother you Stu. But could you please help me, or somebody else?
(24.08.2006, 20:41)

Stu:-
Stef Arts, if you just look at the next menu in this section you will find that it has three levels
(24.08.2006, 21:13)

Stef Arts:-
Yes ! I noticed... thanks ! It works now.
(28.08.2006, 10:31)

Yakov:-
Great work!! I'm trying it out now, has anybody tried a text-input box below the drop down list to see if it can get/hold focus?
(31.08.2006, 11:07)

Michael:-
Works in IE7 RC1
(04.09.2006, 21:39)

Stu:-
Thanks Michael, I have loaded IE7 RC1 on one of my PCs and have checked all of my examples. Still have a few to update and found a couple (animations) that no longer work. Should have the rest working in a week or two.
(04.09.2006, 22:12)

Jack:-
This is awesome.

I wonder if could you figure out how to workaround IE (ver < 7 ) showing select boxes ontop of dropdown menus?

IE7 and Firefox shows the dropdowns covering any input controls -- which is correct.

It seems that no one has figured this out.
(11.09.2006, 14:50)

Mike Thomas:-
Hi Stu - nice work & site.
Re: The ULTIMATE CSS only drop-down menu (with ie6)
I've tried putting two or more horizontal flyout items next to each other on a vertical drop down list but when they are adjacent to each other, then the CSS doesn't change the colour to show the presence of the horizontal flyout? If I put a non-flyout, ordinary item between them then it works fine? Or is it my code? (more than likely)
(21.09.2006, 16:34)

Stu:-
Mike, not sure what you are doing but all it needs is a class="drop" in the link for the flyout.
I have modified my demo to show three flyouts from three consecutive dropdown links.
(21.09.2006, 20:30)

Mike Thomas:-
Stu, Thanks - you are correct. (This is all very new to me.)
My mistake was to use class="upone" for the return to the parent list.
I believe your xhtml example code specifies this class but now I look, its not in the css?
(22.09.2006, 11:32)

Stu:-
Mike, not any more. This was a 'leftover' style from a previous menu, now removed.
I have now revised this menu to make the CSS simpler and give extra functionality in showing the path taken through the menu in all browsers..
(22.09.2006, 12:18)

Milan:-
How to remove flyout menu from some items in first row? Should I keep commented tables or remove them as well?
(26.09.2006, 12:42)

Anthony:-
Stu I would love to have a little help in setting this up - I would of course be prepared to pay for your time. I am seeing some quirks I can't figure out. afinta@gmail.com
Thanks -
Anthony
(27.09.2006, 10:29)

Stu:-
Anthony, email me stu{at}cssplay.co.uk with a url of your problem menu.
(27.09.2006, 19:41)

Zachary:-
Stu - you are a CSS god and I'm so happy to have found your site. I was trying to implement your ultimate drop-down and it is not working in IE 6.0 on PC. This version of the site is currently in production but I am willing to compensate you if we could resolve these issues.

www.roundus.com/roundus_2
(29.09.2006, 00:34)

Shawn:-
Hi all.
Not sure what I'm doing wrong.
When I view this menu in firefox it works fine.
When I view it in IE6 I get the dropdowns but the
<a> link only goes to the "index" page.
It does the same thing when I try it on my website.
Any ideas why?
Thanks
Shawn
(17.10.2006, 05:31)

Stu:-
Shawn, it is difficult to say without seeing your menu.
(17.10.2006, 08:03)

Stu:-
Zachary, make sure that you are using a standards compliant doctype.
(17.10.2006, 10:25)

Heather:-
FYI - I tried this menu with IE7 Release Candidate 1 and only the horizontal bar appears, no drop-downs. Do you know if you will have time to fix it so it will work with IE7? Thanks.
(17.10.2006, 14:25)

Stu:-
Heather, I have a copy of IE7 RC1 running on one of my PCs and this menu works perfectly (as do all of my menu demos except for a couple on the 'examples page.}
(17.10.2006, 17:02)

Lou:-
The dropdown doesn't work in Opera 8.54. Which Opera versions does the ultimate menu support?
(23.10.2006, 21:00)

Stu:-
Lou, it works in version 9.x BUT it can be made to work in 8.54 by reverting back to a previous style.
Instead of using:
.menu ul :hover ul{
visibility:visible;
}
use
.menu ul a:hover ul,
.menu ul li:hover ul{
visibility:visible;
}
and apply the same rule to all :hover styles
(23.10.2006, 21:09)

Stu:-
Lou, I have adapted all the menus to work in Opera 8.5 onwards. All it needed was a trigger with just one style change as my previous post. It did not need all the :hover styling to change.
(26.10.2006, 20:23)

John DeStefano:-
Stu, thanks for sharing your efforts. They've given me great ideas!

Whenever I develop a horizontal menu similar to this one and others you've shared, they don't seem to degrade properly when the browser size contracts... instead, the menu items or buttons begin to collapse beneath one another. I thought adding an overflow value of scroll would correct this, but it doesn't seem to do the trick, or maybe I'm not applying it to the proper element. What am I missing?

Many thanks,
John dot DeStefano at gmail dot com
(14.11.2006, 16:53)

John DeStefano:-
I believe I may have found the answer to my own question: setting the min-width property on the layout, and employing a few hacks and evaluations to get IE to play nicely, gives the page a minimum width and activates scrolling when necessary.
(14.11.2006, 18:25)

Mark:-
Hi Stu, Menu is great Thanks, just one quick question what if I dont want all the main bar button to have a drop down, only saome of them. I have tried this and the menu seemes to double height and get out of wack. Is there an easy way to do this. In the code all I did was remove the appropriate <ul> list.
(17.11.2006, 15:47)

Stu:-
Mark, you will need to remove eveything including the conditional comments and just keep the <li><a href="link.html">Some text</a></li>
See www.cssplay.co.uk/menus/drop_examples.html menu #1 for an example of this.
(17.11.2006, 16:14)

Danny O'Brian:-
Hi Stu, really do love your menu, works great. Except, like Heather, I'm having the same problem in IE7 which appears to have eaten my menus. I've tried everything I can google with no success, getting a bit desperate now. If anyone fancies having a look the menu can be found here (www.discoo.co.uk) and the css lives here (www.discoo.co.uk/library/css/navmenu.css)
(26.11.2006, 12:43)

Danny O'Brian:-
Oops my bad, had wrong doctype declared. Now got just got to work out why xhtml throws out some of the css for the rest of the site ;-)
(26.11.2006, 13:00)

Stu:-
Hi Danny, it doesn't have to be xhtml. You can still use a valid html doctype. and even preced it with <?xml version="1.0" encoding="UTF-8"?> to put IE into quirks mode which will probably correct your site.
(26.11.2006, 15:05)

Kevin Learmonth:-
Very clean and functional menus, I'm impressed.
I did however notice that the menu stops short when viewed on Netscape 7.2. It seems to be the ads. below the menu which cause it to display but not allow selection. The items are there, it's just not poassible to select them.
Keep up the great work.
(20.12.2006, 16:25)

Mark Sambells:-
Hi Stu. I was hoping to use your Ultimate Drop Down menu but I am just about ready to throw in the towel :( It works great in Mozilla but I just can't get it to work with IE6. I've checked the doc type and my site validates in html and css. I don't want to go back to javascript either. If you can take a look my test site is at www.shaldon.plus.com - appreciate any help you can provide and ready to donate of course. Tearing my hear out!
(20.12.2006, 23:20)

Stu:-
Mark, you have removed the IE 'trigger' from the a:hover that drops down the sublevels. I usually use a change of background color but there are other triggers (see my menu tutorial).
Just add an extra 'meaningless' style to the a:hover style
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#999933;
white-space:normal;
}
BTW as this is a commercial site can you add a comment to the CSS to state that the menu is copyright cssplay, thanks.
(20.12.2006, 23:44)

Xing:-
Am I wrong or does the menu fail to work if the text size is changed in the browser?

Xing
(22.12.2006, 11:38)

Stu:-
Xing, this demo uses fixed widths but if you want it resizeable then use ems and it will stay in shape no matter what text size.
(22.12.2006, 14:29)

ToolmakerSteve:-
I'm looking at this page from Firefox 1.
Each drop-down menu hides itself at about the 4th item -- so isn't possible to select the bottom few items on a long menu.
(29.12.2006, 17:17)

ToolmakerSteve:-
NOTE: if the menu is extracted from your site, it works fine. Apparently, some change to your site's CSS is interfering with it on Firefox now?
(29.12.2006, 17:33)

ToolmakerSteve:-
I found what it is - the script for the Google ads in that window rectangle.
(29.12.2006, 17:39)

Scott:-
Comment Box, You must see this comment safely delivered to him Stu Kenobi, response via iyediaz@hotmail.com. This is our most desperate hour (Sat Jan06). Help me, Stu Kenobi; you're my only hope.
(04.01.2007, 18:52)

Erictheelf:-
Does it work as is with IE7?
(21.01.2007, 09:47)

Stu:-
Ericthelf, yes it does.
(21.01.2007, 11:31)

Bradley:-
Stu, long time lurker/admirer and first-time poster!

I am trying to use this menu but seem to be having a wrap problem in IE6 only... no matter what width I specify, causing the whole layout to go awry. Any tips? Also in IE6 the rollover flicker is really really bad on MY version of the menu for some reason, what would cause this?

www.farnorthdesign.com/clients/rhrc/default.php

Thanks for the great work Stu, cheers!
(23.01.2007, 05:36)

trimble:-
I'm getting a "flicker" when moving through this menu in IE. Any ideas what cause this and what to do about it. Works fine in Firefox.
(24.01.2007, 22:09)

Stu:-
trimble, no flicker any of my IE versions, so cannoot understand why you are getting one.
(24.01.2007, 22:37)

trimble:-
Hi Stu, my bad... when pasting your demo code I discovered that I had inadvertently deleted/missed one of the if-endif lines closing the table tags. Once that line was replaced, the flicker went away (along with some other odd behaviors, as you can imagine!).
(26.01.2007, 19:37)

Demro:-
Hey Stu - You're Greeeaaaat - I've been trying to work out how this might be possible for ages.
(26.01.2007, 20:07)

Bradley:-
Hi Stu -- Still unable to get rid of the flicker and weirdness that is happening with IE6 here.

www.farnorthdesign.com/clients/rhrc/default.php

Ideas?
(30.01.2007, 05:42)

Stu:-
Bradley, I have visited your site using IE6 and cannot see the flicker. Have you checked your IE6 settings Tools > Internet Options > Temporary Internet Files > Settings > Automatically ?
It you have 'Every visit to the page' then you will get flicker.
(30.01.2007, 20:34)

Sandra:-
Your ultimate dropdown menu rocks as an .htm file, but when I saved it as an .asp it blew up completely. What can I do? Also, does this menu work for users with screen readers? My college has to comply with ADA standards. Thanks.
(31.01.2007, 01:41)

Stu:-
Sandra, I believe some wysiwyg asp editors mess up the conditional comments in the source code. I don't know of any problems with screen readers, they should see just the nested lists with links (as seen by Firefox etc).
(31.01.2007, 15:52)

JB:-
Thanks Stu!
Note container DIV is class "menu" and was inheriting 1.5em font-size. I'vechanged ALL font sizes to 12px. That works for fonts.

But now dropdown boxes weird. Visited boxes correct height and width, but non-visited boxes less wide, double height in both IE and FF.

Tried changing width of dropdown links from 139 to 150 but no cigar and blotted out white borders in top cells.

Other changes:
- removed all a,a:visited specs from html style and placed at top of .css.

- changed overall width of .menu to 650px.

Please help me through this a bit more.
Site again is www.uucsi.org/menucss.html. My my revised .css: www.uucsi.org/final_drop.css.

Thanks
JB
(05.02.2007, 18:03)

Stu:-
JB, if you read the FAQs and my home page you will see that these menus require a standards compliant doctype to work correctly. This is especially important for IE. There is a link in the FAQs to the w3.org website for a list of suitable doctypes.
(05.02.2007, 20:44)

JB:-
DTD's HTML 4.1 strict, loose, and frameset (the menu targets everything into an IFRAME) on the site but all three the menu up into the top left corner, so I settled for HTML 3.2 and validated that with only one parse error - no "media:all" at that level for your stylesheet link.
The font-size problem seems fixed now, bu the dropdown boxes are still weird different sizes, and it seems to depend on whether they're visited links or not.

Please give me a hint what might be causing this.
Thanks again
(06.02.2007, 09:47)

Stu:-
JB, for this to work correctly in IE7 you will need at least HTML 4.01 Transitional. You have commented out some of the drop down menus but because they enclose hybrid conditional comments this does not remove all of the code and you are left with closing </a> tags. Delete the menus you do not want then see if it is still a problem.
(06.02.2007, 13:14)

JB:-
Removing the comment deletes and a leftover ".menu a:link" seems to have done the trick, even in IE7.

The DTD is still HTML 3.2. I'd love your best recommendation for a readable site/tutorial/reference that will help me graduate from early HTML plus random chunks of CSS design to later HTML and XML.

Thanks for a terrific site.
(07.02.2007, 16:25)

Devin:-
Thanks for the great menu, works for everything but IE6 for me. I think its something to do with the Doctype and/or Flash-Embed.

Any ideas?

www.manleysolutions.com/page.php?page=About_us
(10.02.2007, 00:31)

Joanna:-
I'd really like to use this menu, but wondered if it was possible to have different widths for each menu item (ie change the widths to fit the text).
I've had a go (forcing the change with inline CSS), but of course, it won't work in IE6. (The last menu item gets pushed off the end)
Any ideas of how to get round this?

See: myweb.tiscali.co.uk/jcandler/menu_test.htm
(13.02.2007, 10:48)

Brian:-
Hi Stu... Really nice menu, have it working in prety much every browser, (the hard part) however i just cant seem to give the Top Level an active state no matter what i do.. as in if your in one of the sections i want the top Level to reflect this... any tips? or ideas.. anyone..
(15.02.2007, 15:31)

Jools:-
Hi Stu, Thanks for an inspiring website. I have just installed the ultimate drop-down menu and changed the colours to my site palette. I notice there is an incorrect piece of instruction text in the final_drop.css where it says "style the top level hover" it should read "style the second level hover". It would save dummies like me an awful lot of searching !
(22.02.2007, 13:36)

Mark:-
G'day Stu, just sstumbled onto your site.
Nice clean work! Congratulations. Your efforts really show. I also worked for a long time to get css menus going on a site, and finally managed to get a vertical 3 level css image rollover menu working cross (some) browsers.
Don't really know which browsers break it. Anyway it's good for last few ff & ie.

First working site at www.debtmediators.com.au

The main reason for the message... what happens to the ie5.5 hacks when they go through jigsaw? I gave up on css compliance due to the (many) hacks I used.

best regards .. mark

btw .. not as clean as your's eh?
(22.02.2007, 15:28)

Rik:-
Hello Stu,

Your menus are great! Big help for many people!

I only got one problem with this menu; It won't drop down in IE6. In IE7 it works fine..

Could you please look (when you have time) in my scripts? I can't find what I did wrong.

www.bsmzv.dds.nl/1op1 Design/final_drop.css

www.bsmzv.dds.nl/1op1 Design/index.htm

Thanks in advance!

Best regards,
Rik
(26.02.2007, 12:08)

chikalin:-
Hi Stu,
Im not that familiar with using the AcessKeys but I was wondering if screenreaders are able to acess the hidden links? I try adding accesskey="X" to one of them and then test alt+X but its not working. I cant seem to tab through the hidden links unless I use my mouse. Any suggestions? Thank you.
(27.02.2007, 21:01)

Dave Ferguson:-
Has anyone had any luck getting the ultimate drop-down menu to work in IE7?
I sure haven't had any luck at all.
(06.03.2007, 00:52)

Stu:-
Dave, check that you are using a standards compliant doctype. This is a MUST for IE7 (see the FAQs)
(06.03.2007, 08:00)

Rik:-
Stu,

Did you already watched my script? (see above)
I can't get it fixed for IE6.
(07.03.2007, 17:03)

Stu:-
Rik, your html is all wrong. There are errors in your conditional comments and most of the conditonal comments necessary for this to work in IE6 and IE7 are missing.
Check my original to see that your conditional commment enclosing the </a> are incorrect and that all the conditional comments enclosing the tables are missing.
Also when there is no drop down you do not need the conditonal comments.
(07.03.2007, 19:11)

jantjeikke@gmail.com:-
Hi Stu!
I've got the same problem as Rik.. I can't get my menu's to drop down in IE6...

could you please help me out..

one of the pages:

www.ventigrate.be/pages/links.aspx

css:

www.ventigrate.be/css/main.css

Thanks alot in advance!!
(14.03.2007, 18:03)

Stu:-
jantjeikke@gmail.com, whatever you are using to produce your page code it is stripping out all the conditional comments that are necessary for this to work in IE6. You will have to hand amend the page to add these back in.
(14.03.2007, 19:19)

Rik:-
Hello Stu,

Here Rik again. My menu now works fine in IE. You opened my eyes, because it didn't see the mistakes I made myself. Thanks!

The only problem I still have is that the menu won't work in Mozilla. I think it have something to do with the positioning of the Div's.

Could you, or somebody else want to take a look at my html (and css (I didn't changed much)?

www.bsmzv.dds.nl/1op1 Design/index.htm
www.bsmzv.dds.nl/1op1 Design/final_drop.css

Thanks in advance!!
(21.03.2007, 17:02)

Pete:-
Hi Stu,

A really great menu (and site).

I wonder if you could help solve a problem I have. I am trying to make the main menu vertically aligned, and the sub-menus pop out from the side.

I have removed the float: left, and change the top and left of the submenus. Can be seen (with css embedded) at:

www.peterchavasse.f2s.com/test.html

Seems fine if firefox2, but in IE7 the sub-menus disappear when you try to select one of the bottom sub-menus.

I would really appreciate any ideas you may have.

Thanks in advance,

Pete
(22.03.2007, 12:27)

Stu:-
Pete, why would you want to make this horizontal menu into a vertical one when there are plenty of demonstrations already on CSS play of vertical menus. The latest one has four sub levels and overlap/overrun.
(22.03.2007, 12:56)

Rik:-
Stu or somebody, can you please take a look at my posting? Thx!
(26.03.2007, 11:20)

Stu:-
Rik, if you look at your html then you will see that your conditional comments around the closing </a> of the top level links is only correct on the first link -
<!--[if IE 7]><!--></a><!--<![endif]-->
All the other links have -
<!--></a><!--<![endif]-->
(26.03.2007, 20:26)

Jo:-
Hello Stu,

First off all; great menu's!

The menu works fine in IE7 and Mozilla, but in IE6 it dropsdown, but I can't hit the submenu. So the submenu dropdown, but you can't touch it.

Strange is that there is more space between the toplevel and the sublevel in IE6 than in IE7. Can it have something to do with a border around a Div? Does this only work in IE7 and not in IE6?

Please help! Thanks in advance!!
(04.04.2007, 16:25)

Stu:-
Jo, this is caused by a gap between your top level list and the sublevel dropdown. The gap is controlled by the top position in:
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:150px;
}

Make this smaller to close the gap.
Also check that you are using a standards compliant doctype (without the xml declaration).
(04.04.2007, 22:07)

Jo:-
Thanks Stu, I changed the html for the hack IE5.5 and now it works fine!
(05.04.2007, 12:23)

dsnyder:-
Stu, this is a great resource! Thanks. I also can't get this menu to drop in IE6. What I don't understand is why the demo version doesn't work useing IE6. FF & IE7 are lovely. I see plenty of comments on this but no mention of people having problems with the demo on this site. Does it drop for anyone in IE6 or does someone have a working version up someplace that i can checkout?
(20.04.2007, 23:11)

Stu:-
dsnyder, let me guess.....you are using a standalone version of IE6 on the same PC as IE7....right?
If so then the standalone version thinks it is IE7 as far as the conditional comments go so it is fed the wrong information for the dropdown.
I use one PC with IE6 and another with IE7. This is the only way to test these menus.
(20.04.2007, 23:38)

derek:-
thanks stu, you were so correct. I got rid of IE7 on my other computer, installed IE6 and the menu works as planned. So much for IE6 stand alone. Thanks for the quick response and this great site!
(21.04.2007, 21:46)

Jeffrey Chase:-
These menus are a tremendous asset. Thanks for your work. I was excited to use Mk3but am seeing that it is failing on NS7.0.2 I have a client who wants me to support that browser (fun) is there a hack for NS7.0.2? Thanks again! In the meantime I see it is fine on NS8, and I am lobbying to get them to make the jump.
(09.05.2007, 14:43)

Stu:-
Jeffrey, 0.24% of my visitors use Netscape and only and of those only 5% used v7.0.2
Or to put it another way, I had 61,495 unique visitors last week and only 4 used NN7.0.2
I would suggest an upgrade :)
(09.05.2007, 19:45)

chrisandy:-
Great work Stu - I've been playing around with your examples and MODx. I can't get final_drop to work without running into the select problem. Is it supposed to work if, say, instead of the one row of links you have in the example, there are three (that's what I have). I can get the drop down showing over the top of a text link but not another menu item? Many thanks
(14.05.2007, 22:59)

Norto:-
hi! great menu, and sorry for my horrible english

by the way
I wanted a menu with a relative width so I made this modification on the 'final_drop.css' file :

/* style the links for the top level */
.menu a, .menu a:visited {
width:100%; /* <- made a % width */
}

.menu li {
width:10%; /* <- made a % width */
}

it's worked fine under IE5 but the subs menus where screwed up under firefox and opera : so I added this class for (poorly) fixe this bug (?) :

.menu li li {
width:150px; /* <- redefine a px width */
}
(18.05.2007, 14:20)

Ben:-
I've encountered a strange problem on IE6. I have menu setup with 5 top levels:
(Top level item 1 has no sub items. Top level item 2 has 6 sub items. Top level item 3 has 5 sub items. Top level item 4 has 5 sub items. Top level item 5 has 3 items.)

When I view the menu in IE6 and hover over top level items 1 and 2 do, the hyperlinks do not underline. Underlining does not occur on sub-item 1 of top level item 2, either. Sub item 1 of top level item 2 does not change background color, either.

All hyperlinks function when clicked, but the underlining and background highlighting are not working as intended.

I have determined that this behavior is present when I change the hyperlink url for items I just described from .html to .php.

Changing the links back to some .html page corrects the behavior, but I have no idea what's going on here.
(24.05.2007, 07:34)

Rick:-
Hi Stu. First, great site! Thanks for all your hard work.

Just wanted to let you know, I'm using Mozilla 1.7.13 and can't scroll down through all the menu items in the drop-downs. When the cursor gets to the advertisement link below the menu the drop-down disappears. Is anyone else seeing this behavior?

Rick
(25.05.2007, 03:11)

Marco Vogelaar:-
Hi Stu,

A great menu... but...

In all browsers the menu works correctly, except for IE6.

The items of the menu flicker in combination with the use of overlib.js in IE6.

If I don't load Overlib the menu doesn't flicker in IE6. The menu also doesn't flicker if I remove the following lines in the
overlib.js file :

o3_x = eval('e.clientX+o3_frame.'+docRoot+'.scrollLeft');
o3_y = eval('e.clientY+o3_frame.'+docRoot+'.scrollTop');

But if I do this the items that "overlib" are shown in the top-left corner of the browser.

Can you help me?

Thanks in advance,
Marco Vogelaar
(31.05.2007, 12:42)

Stu:-
Marco, this looks like an oveerlib problem and javascript. Why not try 'tooltips' with CSS instead?
www.cssplay.co.uk/menu/tooltips.html
(31.05.2007, 17:47)

Marco Vogelaar:-
Stu,

Isn't there a way to rewrite the two lines of overlib.js so that it works together with your menu in IE 6?

Thanks in advance,
Marco Vogelaar
(01.06.2007, 06:16)

Phill:-
Great menu example, thanks, I'm using it on a personal site for my mum, hope thats ok! You'll get a nice link at the head of the links page :)
(03.06.2007, 15:35)

Marco Vogelaar:-
Stu,

The problem is solved by loading the csshover.htc file in the body of the css file and changing onmouseover in onmousemove in the csshover.htc file.
(04.06.2007, 08:07)

Matthijs:-
Stu, great site and very very great cross-browser menu! We owe you.
Some minor thing I'm encountering: I included a search-option as a menu with a searchbox and a 'more-options' - both as child menu's. Works fine. But in IE6 there is a break underneath the search whereas in FF, Opera it's just fine...
Here's the code:
<li><a class="drop" style="text-indent: -11px; height: -25px">
<form name="frmSearch" method=POST onsubmit="javascript:OnSubmitForm(this);">
<input name="txtInput" type="text" value="[keywords]" onFocus="javscript:this.value=''" size="8">
<input name="cmdGo" type="submit" value=">>" size="2">
</form>
</a></li>

Any clue, much appreciated! Thanx!
(04.06.2007, 22:16)

Stu:-
Matthijs, you will probably need to give the form a margin:0; style.
(05.06.2007, 09:34)

Marco Vogelaar:-
Stu,

Now that the flickering is away in IE6, the only problem I now have is that the menu items disappear behind listboxes in IE6.

Do you know the solution for this problem?

Thanks in advance,
Marco Vogelaar
(05.06.2007, 11:14)

Coffee Mug:-
Hey Stu, dont know if you were aware of this, but in the info text you asked for confirmation about the menu on IE 7. Well the menu works in IE 7. I already tried it.

Thanks for your menus stu, you are great :)
(14.07.2007, 20:20)

Chris_Chicago:-
I'm the newby here, I'm sure. I am struggling to get the menu to look like Stu's -- specifically the font sizes don't match up on the menus (mine look smaller). I think I need to go back to some basics here (I have done some work on css - not extensive, but have CSS the missing manual, and a few other dreamweaver books. Any essentials that anyone can provide??? Thanks - and great site Stu. If I use anything, I'll happily donate !
(14.08.2007, 04:14)

BartasBoy:-
hey stu,
i'm having some difficulties with this menu - when i change the doctype from xhtml 1.0 to html 4.01, it still works great in all browsers - except firefox. for some reason, the third level fly-out menu is always visible and i couldn't find out why. first i thought i did something wrong during modification of the menu, but then i made a test file and copied the entire code with no modification ... and the problem lasted. I'd appreciate any help. But this site rocks anyway ;)
(26.08.2007, 16:20)

BartasBoy:-
hmm ... i found out the problem's only with html 4.01 transitional, html 4.01 strict is ok, so it's fine, i'll just change the doctype to strict :)
(27.08.2007, 12:09)

thomas:-
hi stu,
I really love your work and I'm just work on it.

I got a problem if I use an Id (or class) for on of the top-level Links just to change the background (-color for that item if its active).
It works with all other browser than IE6! With IE6 the drop down doesn't show up (sic!)but the background color for that top-leve´l link does change.
If I givbe the second-level links an ID (or class) it works fine.

Would be great if you got an solution for that problem !!

best regards
thomas
(29.08.2007, 23:12)

thomasw:-
hi stu,
once more and to correct me.

I got a problem if I use an Id (or class) for one of the top-level Links just to change the background (-color for that item if its active).
It works with all other browser but with IE6 the drop down doesn't show up just for that top-level-link (sic!)but the background (color) for that top-level link does change.
If I give the second-level links an ID (or class) it works fine.

I just got to know: this behaviour only appear if I give that ID or class a background !!! If I just change the color or font-weight everything is Ok also in IE6.

Just test it on that drop-down menu on this site as I did!!

Would be great if you got any solution for that problem !!

best regards
thomas
(31.08.2007, 00:32)

Stu:-
thomas, try adding visibility:visible; to the :hover style for the these links.
(31.08.2007, 07:35)

thomas:-
hi stu,
thanx a lot:
that solution works fine!!

but, just for me to understand:
why I have to add visible at that point just to change the background for top-level-link within an ID or class to made that drop-down visible as well in IE6???

best regards
thomas

cherrymusic.de/navi_test/zwei/
here you'll see your navi in action for test-purposes in an fixed header on an free based css two-column site.
the first two links beyond 'unternehmen' are active!!
(31.08.2007, 15:28)

Stu:-
thomas, IE6 has a bug (believe it or not) with the :hover style. It is necessary to 'change an unhovered style' or add a style to trigger the :hover state. 'color' doesn't work, but background color does, as does white-space:normal and visibility:visible. For a list of triggers see www.cssplay.co.uk/menus/hovercraft.html
(31.08.2007, 20:14)

Brandon Larsen:-
I am a newbie, and don't know how to change your menu so only the third and fourth menu items actually drop down, but the rest do not have drops. Can anyone help me? thanks!
(01.09.2007, 02:05)

thomas:-
hi stu,
thanx a lot for your answer - much more clearer now. Your hovercraft-tutorial is a little bit quite hidden beyond the menu site. There should be a link as well on this site. If I would have seen that, I probably wouldn't have asked you....

But - and I have to smile - just another little question - not just important - but....:
Everything is fine now - if you follow my link
( cherrymusic.de/navi_test/zwei/ ), but I just saw that (only!) in Opera (I used 9.23) the font in the drop-down menu and especially in the third-level-links are quite smaller than in all other browser I tested.
And in IE 5.5 for any reason the fonts in the drop-down much more bigger.
Right now, I didn't find the reason for.
As for it just happens in Opers & IE 5.5 it doesn't hurt me too much - but just I want to know why!?
here you got my final_drop.css direct:
cherrymusic.de/navi_test/zwei/final_drop.css

best regards
thomas


PS;
Brandon:
just take away all the list entries belonging to that top-level-entries!
(01.09.2007, 23:59)

thomas:-
hi stu,
just to correct me (once more...):
I got it.
You just gave your menu a font-size about 0.85em and the menu links a fixed font-size from about 11px.

I wanted to have the same and flexible(!) font-size for the sub-levels as for the top level.

OK, now i gave the '.menu' a font with 0.8em, the 'menu ul ul' a font with 0.85em and the 'menu ul ul ul' a font with 1em.

That was a fine result with IE6 Firefox & Opera - but I don't know why I had to use this differnt font-sizes for em?

IE5.5 still had a different feeling and I had to hack it for ul ul with 0.65em as well as for ul ul ul.

that works and the whole menu got now a flexibel fonst-size, and I still wonder about that ems.....??!!

cheers thomas
(03.09.2007, 20:35)

Marcel:-
Great menu! I did prefer the MKII as it lets you design every part, however there where compatibility issues so I took a look at this one. Much cleaner and works perfect! Didn't manage though to change the code so I can design a different hover for the top level, any idea?? Cheers!
(21.09.2007, 13:15)

Marco:-
what is this strange html comment?
<!-->

thanks,
marco
(24.10.2007, 09:13)

Ed:-
Great dropdown. Is there any way to cover IE7 and remove all the commented checks out of the code?

Thanks!
(29.10.2007, 14:49)

Martin:-
hi stu,

i'm trying to implement menu for my dynamicly generated webpage. As my secondlevel elements dont have static width, i have problem with creating :hover effect for them. I'm trying to change background color for :hover second level elements, but the background is showing only around text, and only for element with longest width it covers whole background of parrent element.

Below is the whole css with cuted third level elements (as i dont need them)


Thanks for help.
(13.11.2007, 13:21)

Martin:-
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:23px;
left:0;
background-image: url(../media/pictures/menu_pion_bg.gif);
background-repeat: repeat-x;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:22px;
t\op:23px;
}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:none;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
display: block;
font-weight: normal;
text-align: left;
}


/* style the top level hover */
.menu a:hover{
line-height: 26px;
color: #ffffff;
}
.menu :hover > a {
line-height: 26px;
color: #ffffff;
}

/* style the second level hover */
.menu ul ul li a:hover {
line-height: 1em;
background-color: #EFD78A;
color: #000000;

}

.menu ul ul li :hover > a {
line-height: 1em;
background-color: #EFD78A;
color: #000000;

}
(13.11.2007, 13:22)

Martin:-
You can download the example from:
redrose.lap.pl/fixme.rar

I have made some corrections to it, but still problem seems unfixable ;)
Hope You can help.
(13.11.2007, 14:19)

Matt:-
Hi there,

Great script, but i can´t figure out how to solve this IE7 bug... if the menu opens down and i actually hover the submenu items, the whole menu always disappears as soon as it crosses a div-container with text in it that lies below the menu.
i thought it could be fixed via a high z-index, but that didn´t do any good.
(15.11.2007, 14:24)

Joel:-
Hey,
Even though you already may know. This demonstration works fine in IE7.
(23.11.2007, 14:54)

Ana:-
Hi again Stu, I have checked this on two other PCs running IE7 and the venue hire div is aligned correctly. So, maybe that other PC has a problem or maybe the person I phoned to check the changes I attempted before sending my SOS didn't look properly. If all is OK on your IE7, just ignore my post and I will ph them again tomorrow. Also, sorry for not noticing the rule says to leave off the http part.
(05.12.2007, 08:28)

Peter:-
Hi,
first of all I like your great script! I tried to integrate it into my website. In Firefox, IE5, IE6 it runs well, but in IE7 nothing happens if I go with my cursor over the first level navigation. I tried to modify the css and html code, but the only thing I reached was that the second level navigation appears in IE7, but you cannot klick on any item because the list disappears if I leave the main link. If someone has any idea of this problem, please post a solution! thx
(16.12.2007, 10:19)

Matt:-
Hi, I tried to adapt your menu for a site I've created (in my list only top links and first level ones do exist), but I got strange effects in IE5 and IE6... in IE7 instead everything functions! Could you give me the substitutive values in pixels for this CSS to match a 650 pixels wide header? Thanks!!
(11.01.2008, 22:04)

Kalle:-
Hi,
love that drop down, but i have a problem on IE, it just refuses to show above all other divs and texts, the drop downs are covered up by other divs with a background image which makes everything useless. Would be great if somebody could help.
Thx
(10.02.2008, 21:50)

rostom:-
Trying to make a small modification to this menu and am having a hard time. I want the 1st level menu items to be equally spaced. The way it is designed now they are not--a good example is when a menu item text is longer than the rest.

To do this I decided to remove all the width attributes from the 1st level menu and then place an even amount of padding-right on them all. This seemed to work in all browsers except IE6. It appears that IE6 needs to have a width set for each menu item or else it stretches everything to 100% and thus each menu item takes up one full line.

Please let me know if what I'm trying to do is possible. Much appreciated.
(04.03.2008, 16:54)

Stu:-
rostom, there are several examples of variable width drop down menus on CSSplay, but IE6 does present a problem. Try the 'skeleton' series.
(04.03.2008, 17:20)

Jennifer:-
Any solution for the drop down links disappearing as soon as one mouses down to try to click on them?
(25.03.2008, 19:27)

Tonya:-
Love this menu. However I'm trying to integrate access key functionality and it doesn't seem to work. Any thoughts? Much appreciated
(26.03.2008, 18:58)

Mike:-
Hi Stu, I'm using your dropdown menu on a city festival website, and it's working great except for one thing. When I mouse down to the second level links, the top level link loses its hover background. I'm still a CSS novice and it's not clear in the stylesheet which rules govern this behavior, so could you point me in the right direction? I'd be happy to make a donation if you can help me out. Thanks!
(29.04.2008, 15:10)

Stu:-
Mike, if you email me stu{at}cssplay.co.uk with the url etc. then I can offer my assistance.
(29.04.2008, 15:31)

Uncle Chevitz:-
Awesome code man, but I had trouble locating it. www.cssplay.co.uk/menus/final_drop.html does not seem to have a link to the CSS at all. You might consider making the resources a little more obvious, I had to hunt just for the one tiny little link to the xhtml, but the content is top-shelf by a lot.
(05.06.2008, 01:27)

Stu:-
The information on where to find the xhtml is in the site FAQs.
(05.06.2008, 07:45)

Jon:-
Hey, last week the menu worked perfectly in IE6, but I came here today and its broken...and not just here, on my site too. Any idea why it would break on multiple sites in IE6?? Thanks
(11.08.2008, 16:34)

Stu:-
Jon, could it be that your IE6 has changed? This still works perfectly in IE6. If you are using a standalone version of IE6 on the same PC as IE7 then this is very buggy and IE6 will think that it is IE7 when it sees conditional comments.
(11.08.2008, 16:40)

Jon:-
actually yes...I forgot I had installed the IE8 beta, so I checked the menu in IE6 on another machine and it looks great! Thanks again
(11.08.2008, 17:47)

Robert:-
First of all, splendid menu!
My question; is it possible to add another level to the menu? And if yes how could I code this?
(25.08.2008, 14:33)

Simon:-
Great Menu, found an unusual bug. In the line for ".menu a:hover, .menu ul ul a:hover", the background property causes the drop down menu to .. well, not drop down if using "background:#fff;" on IE6. For any other colour variation - ie, #aaa, #abc, #a4b2c9, etc it's fine, including #ffffff. It's only this property in this line, never come across anything like it before. Any suggestions?
(26.08.2008, 03:14)

Stu:-
Simon, this is a well documented bug but it is not because you have a white background. If you read my tutorial www.cssplay.co.uk/menus/hovercraft.html (section 4) you will find the answers.
(26.08.2008, 07:39)

Darren:-
This doesn't work in IE8 beta2. The mark II version does seem to work.
(28.08.2008, 05:28)

Blaz:-
Hi Stu!
I'm trying to implement this menu, but instead of showing it on hover, show it on click.
I tried using :active and it works, but you have to hold the mouse button down. Adding :focus brakes it completely. Any pointers would be appreciated.
(29.10.2008, 11:14)

Stu:-
Blaz, it is not possible to use mouse clicks for this menu. The first click using :active and :focus will open the dropdown but the second click will only serve to cancel the first click and the menu will close.
(29.10.2008, 11:19)

Lloyd:-
I've tried adding this menu (the MkIII) to a page on my site, but it is not working. In I.E. the formatting is all thrown out and nothing drops down. In Firefox the menu looks right, but when you hover over one word, the menu drops down and all the hover/click second level boxes appear at once on top of each other, even if you don't hover or click on the appropriate spot. This is the third drop-down menu I have got from the net, and all three have been similar. I must be doing something very wrong. I took the .css files (dropdown.css and dropdown_ie.css) from the MkII version, because I couldn't find any MkIII versions.

Also, is there any way to make the menu appear centred on the page? At the moment it appears on the left. Simply adding <center></center> doesn't seem to work for some reason.
(28.12.2008, 17:33)

Stu:-
The css for this menu is in the page head. Using stylesheets from a previous version will not work.
You also need to check that you are using a standards compliant doctype.
(28.12.2008, 19:00)

Nicole:-
Hi Stu,
I'm currently using one of your drop down menu: final_drop

It works great in FF, but not in IE? I don't know how to fix it. =(

The sub menu list does not appear.

Please help. Thanks.
(29.12.2008, 07:38)

Michael:-
Hi Stu,
The Ultimate drop down menu is breaking my layout in IE6 windows but works great in IE7 and Firefox windows. Looks good in Safari windows, but the hovers die while scrolling down.
I'm using Matthew James Taylor's Holy Grail Liquid Layout matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm. Are the 2 conflicting somehow?
The site I'm working on is www.masoncitynoonrotary.org

Thanks for your help.
Michael
(13.01.2009, 18:17)

Stu:-
Some of your conditional comments are in the wrong place.
(13.01.2009, 19:37)

Ian L:-
Ok i feel like an idiot for asking this, but where do i download the files to try and implement the menu? is there a download link or am i supposed to just view source and copy it that way? I'm just assuming there's a download link for the bare html and css needed. appreciate if anyone could point that out for me. thanks
(27.01.2009, 04:35)

Carl:-
Hi Stu. Again, well done for creating a simple and effective drop down. I have the same problem as Simon has previously posted on 26.08.2008:-
"Simon:-
Great Menu, found an unusual bug. In the line for ".menu a:hover, .menu ul ul a:hover", the background property causes the drop down menu to .. well, not drop down if using "background:#fff;" on IE6. For any other colour variation - ie, #aaa, #abc, #a4b2c9, etc it's fine, including #ffffff. It's only this property in this line, never come across anything like it before. Any suggestions?
(26.08.2008, 02:14)"

I got the bug when i used #f1f1f1 but #f2f2f2 or any other colour i tested is fine. I can live with this if it's just a specific IE6 bug with that colour, but my concern is that if there is something else in the code that is causing the problem, when else will it break?! Have you coma accross this before, and have you found a solution for it?
(06.02.2009, 12:36)

Stu:-
This is a well known bug in IE6 and is covered in my tutorial:
www.cssplay.co.uk/menus/hovercraft.html

IE6 requires a trigger.
(06.02.2009, 13:13)

John Cahill:-
Hi, Stu,
I am working on adapting this menu for a not-for-profit community site I have been arm twisted into building.
I should say that I am using IE8 beta in development and testing.
Something I notice on my site and on your demo site is that the swcond level drop down menus will disappear on reentry to the first level menu (under certain circumstances). Let me explain: if you move the mouse to 'Mozilla', for example, the drop down menu appears, if you then move the mouse down into that menu, say, half way, then back up to 'Mozilla', the menu will disappear. It is then necessary to remove the mouse from the first level menu and reenter 'Mozilla' for example to see the menu again. Not sure if this is an IE8 problem or a glitch with the menu design but I would have thought the drop down menu should stay visible when the mouse returns to its parent first level menu item. I don't have the CSS smarts to know if this is even possible so I look forward to your input. Also, in my initial investigation I couldn't get the little grey arrows to display but I haven't focussed on this yet.
(15.03.2009, 06:01)

John Cahill:-
Hi, again, Stu,
I did a bit more investigation and the beahviour I reported does seem linked to IE8 beta. Is this something you would address, in time, do you think?
Thanks for your work on this project.
Regards,
John
(15.03.2009, 22:45)

John Cahill:-
Hi, Stu. I have gotten on top of most aspects of adapting your menu, I think. The one thing I can't get to happen is the display of the little grey and blue expansion arrows (or any other image) to indicate a third level flyout. Perhaps you can advise? Your work is much appreciated. grfa.net/cobras
(17.03.2009, 22:05)

thomas:-
hello Stu,
I'm using since longer times you ultimate dropdown menu...
I wonder if you're going to develop the CSS for the IE8 in near future???
Right now I still setting the Http Header via Header set X-UA-Compatible "IE=EmulateIE7" that IE8 can play the drop down in the correct mode.
please, let me know
cheers thomas
(05.04.2009, 14:32)

Tom:-
Great job on the menu! I absolutely love it; I've massacred the code to create something else entirely and it still stands strong. I have a small challenge though. Currently, you can add a background image for each individual list item. I'd like to be able to add a background that spans the whole list. I think you can do this using a div; but the trick is cutting off the background when the list ends. I'd love to see it, great job again on the menu! :)
(25.07.2009, 03:29)

Martin:-
Hi Stu! Great work with the entire CSSPlay site!

I'm trying to add a third sub-menu to the navbar, but when I do, the third sub-menu always shows when I'm in the second sub-menu. I can't seem to get it to stay hidden until hovering over the correct link. Any ideas? Thanks!
(19.08.2009, 20:29)

Irina:-
This also works in Konqueror; nowhere visible yet but I'll notify you when it's up. Thanks!
(12.07.2010, 11:20)

Mark:-
Stu, I'm having a hard time download THIS MENU CODE (ultimate dropdown menu. I've donated 2X, and still no link. marco@marcosoftware.com

Need the menu, man. Thanks.
(03.10.2010, 10:22)

Jamie McArdle:-
Hi - this menu is PERFECT for my church's "marketing" website (we have one site for the church-as-church and a second site to attract people to use its spaces for events, receptions, retreats, etc. - to pay off the mortgage!). I'd like permission to use it if you're willing to give it. What is the suggested donation for such a use?

Thank you!

Jamie McArdle
(06.01.2012, 21:39)

Miranda:-
Maybe a strange question, but how do I get the codes so I can adjust them to my own site? When I "view sources" I see a lot of other stuff from the site, but I just want the codes for the menu ... Hope you can help me ... thanks in advance! Miranda from the Netherlands
(08.06.2012, 19:25)

Nicolas:-
Hi Stu,
First thanks a lot for all the work done and providing freely such valuable resources for beginners like me.
I have tried to integrate your drop down menu, but for some reasons that I can't find out I have several issues :
- the 3rd level is automatically shown
- when hovering over the 2nd level the 1st one loses its background
- same with 3rd / 2nd level

If you could have a look at nicolas.bernardin.free.fr and give me some hints, it would be very appreciated.
(09.12.2012, 21:35)

Stu:-
As you have stripped out all the IE5 and IE6 coding then you need to remove all the IE5 and IE6 styling. Then change all styles with :hover to li:hover
(09.12.2012, 22:06)

kai:-
where to get css file
(27.02.2015, 16:54)



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