Mobile Friendly Website

CSSPLAY

Doing it with style

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

Todd Reid:-
Stu: You continually amaze...great work! Some very innovative breakthroughs here...

Todd
(31.07.2006, 18:54)

Mike Lane:-
Stu,

One question. As I'm sure you're aware, IE6 has the nasty habit of giving select elements the highest z-index level on a page. Therefore if your menus open near a select element they will fall behind it.

One solution from the net that I've found is to use an iFrame to compensate for that (since iFrames apparently get a higher z-index and therefore act as a shim).

My question is, would it be possible to add a conditional comment containing an iFrame (an iShim as it were ;-D) that has a sole purpose of keeping the selects down.
(31.07.2006, 23:25)

Val Somerville:-
this is wonderful - I couldn't work out how to do this with just css - thankyou.

I have a problem however - in Firefox 1.0.6 the dropdown does not hold and the menu disappears as soon as I move off the top level - even on this site. This happens with all the drowdown menus.

In IE it displays fine and holds the dropdown so I can move down the dropdown list.
(04.08.2006, 05:50)

Stu:-
Val, you need to update your version of Firefox. We are now at v1.5.0.6 which amongst other improvements has had many security patches over your version (and it's free to update).
Less than 0.2% of my visitors use your browser.
(04.08.2006, 08:04)

Val:-
Stu,

Wow - thankyou for such a quick response - I have upgraded and of course it is working as you intended :)

Cheers
(05.08.2006, 03:49)

Jürgen:-
Hi Stu, one Question -> If i hover a sublevel item in IE the TopLevel backgroundcolor stays in the hover color (thats great!) - but if i hover a sublevel item with Firefox(v1.5.0.6) the color from the TopLevel Item falls back to the normal state color. Hope you understand what i mean...is there a way to change this also for Firefox or is this not possible? Thanks!
(14.08.2006, 14:46)

Mariette:-
Thank You very much for being a sharing person. I only had one question concering the drop down menus. In some browsers the menu disappears behind whatever is below it(when it drops down that is). Has this issue been address or can it be remedied?
Thanks Again
Mariette
Canada
(15.08.2006, 20:08)

Stu:-
Mariette, only forms will cover this menu when viewed in IE and this is a problem with any menu. All other elements can be given a lower z-index to allow the menu to drop over.
(15.08.2006, 20:38)

Lothar:-
Your side is one of the most comprehensive sides of the web and,not being a professional, i am learning a lot.
My problem is that often i cannot read well the small font-sizes (15'' monitor, 1024x758px). If i try to increment the view than your menu jump out of range and also this drop down menu.
It would be nice to have a solution for people with sight problems.
other notice: the menu doesn't function in Opera version 7.53
Lothar
Italy
(20.08.2006, 16:29)

Stu:-
Lothar, I cannot guarantee that the examples will work in older browsers. You could update to Opera 9 which does work and has an excellent zoom facility and it's free.
(20.08.2006, 16:43)

Fahed:-
One thing... why do tables have to get involved?

I'm no CSS guru to answer this myself, but i would also like to know why.

Thanks
(28.08.2006, 10:24)

Max:-
Fantastic use of CSS! Not all users in my organistation use their browser (IE) maximsed. This causes top-level menu items to wrap to a second line. When I hover over a drop-down, it is obscured by an item that has wrapped to a second line and the menu doesn't work. Any suggestions? I thought of z-index but that only works on absolute elements, of which there are two, and setting z-index on either has no effect.
(28.08.2006, 11:25)

Stu:-
Fahed, if you check the information on the earlier versions of this menu then you will see why tables are involved. Basically they are need to make IE nest links. Firefox, Opera etc use li:hover to make these menus work and it is possible to nest <li>s to provide the drop down and flyout sub levels. IE can only use a:hover and nested links are not allowed and will not normally work. BUT if you nest the links inside a table then IE has a BUG in that it will recognise both the outer AND the inner link.
So with the extra help of conditional comments to hide the nested links from other browsers you have a dual system of li:hover AND a:hover.
(28.08.2006, 11:27)

Stu:-
Max, This will be a problem with any drop down menu system. The only answer is to not allow the menu to shrink with reduced window sizes but have a horizontal scroll instead.
(28.08.2006, 13:11)

Max:-
Stu, many thanks for your prompt reply. That's what I figured, and I'm happy to do that. What CSS would be required to prevent the menu from shrinking and remaining the fixed width?
(28.08.2006, 13:54)

Stu:-
Max, you will need to specify an overall width of the top level ul.
(28.08.2006, 15:12)

Max:-
Great! Thank you Stu -
(28.08.2006, 15:33)

Fahed:-
Stu, thanks for the response.

1) In your CSS you have formatted 'table' without making it a child of '.menu', i.e. .menu table! This gave some grief trying to figure out why the menu was being positioned incorrectly. Not using any tables on your site lets you get away with it, but just thought to let you know.

2) How do you, and other CSS developers, manage to test code like this on multiple outdated browsers on different plaforms?

Thanks
(30.08.2006, 06:40)

clif:-
Stu,

Superb work!
Question! Can you please help me to get this ultimate dropdown menu transformed into a pull-up menu, just like you did with the previous version?
I tried a lot, but with no succes. Please help

Thanx a lot!
(30.08.2006, 22:59)

Stu:-
clif, www.cssplay.co.uk/menus/final_pullup.html
(06.09.2006, 10:16)

Nick:-
Hi Stu,

LOVE YOUR WORK!! You are absolutely sensational - the css King. And super generous to boot.

I am interested in using finaldrop2 for a site I am developing and will paypal if I use it.

I am wondering if the widths of the top level menu boxes (eg: Demos / Boxes... etc) can be relative to the length of the text rather than a fixed pixel width for each top level menu item.

(Its purely for aesthetc reasons.)

I tried using width:auto in a few places - this worked a treat in mozilla 1.5.. but failed in Ie6 (width:auto stretches the top level menu items the entire 750px, which each item on a new line).

Any suggestions.

Thanks a million Stu
(15.09.2006, 11:04)

Stu:-
Nick, the top level can be relative to the length of text but the dropdown and flyout sub levels must be a fixed width (px or ems) for positioning correctly. www.cssplay.co.uk/menus/drop_examples.html has examples of this with menu #1 and #2 the easiest to follow.
(15.09.2006, 16:49)

Nick:-
Thank you Stu. Working a treat
(removing width and adding float:left in a few spots does the trick)
will paypal when I put this into my next site.
much appreciated.
you're Awesome!!

p.s. this menu doesn't work in my version of Opera 8 on your site or my demo page (but degrades beautifully - top level links still look as per css)
(17.09.2006, 09:45)

Shad:-
Stu, first off, excellent work on these drop down menus. I've been having a great time trying to tweak them to my specific use.

Which brings me to my question: is it possible to have the top level be strictly images (that change when moused over), and a normal text-only drop down? Secondly, can each drop down section be given a specific width?

I've been trying to do the above for a few days, but it always seems that IE, once I replace backgrounds with images and such, stops rendering the drop down menu.

Thanks for any help you might offer, and keep up the awesome work!
(19.09.2006, 19:37)

Stu:-
Shad, it should be possible to change the top level items into images. You may need to place them in a <b></b> tag for IE OR have them as background images as I did with www.cssplay.co.uk/menus/flyout_wall.html .
The drop down menus can be individually styled if you give each drop down <ul> a unique class.
(19.09.2006, 20:38)

Shad:-
Stu: You da man. Thanks to you, I've got myself quite a nice drop down menu. Thank you SO Much!
(21.09.2006, 20:51)

Deekee:-
Good morning Stu,

great work on..

The ULTIMATE CSS only drop-down menu version 2 with THREE sub levels

but if check the page with:

validator.w3.org/

The flyout menu fails miserably, see:

www.cssplay.co.uk/menus/example_flyout.html
What to do: There are broken fragments which must be fixed.
Response status code: 200
Response message: OK
Lines: 26, 67, 68, 72, 73, 74, 75, 76, 80, 81, 82, 83, 88, 89, 94, 98, 99, 100, 101, 102, 107, 108, 109, 113, 114, 115, 116, 120, 121, 122, 123, 138, 139, 143, 144, 145, 146, 147, 151, 152, 153, 154, 159, 160, 165, 169, 170, 171, 172, 173, 178, 179, 180, 184, 185, 186, 187, 191, 192, 193, 194

Broken fragments and their line numbers: They need to be fixed!
nogo: 67, 68, 72, 73, 74, 75, 76, 80, 81, 82, 83, 88, 89, 94, 98, 99, 100, 101, 102, 107, 108, 109, 113, 114, 115, 116, 120, 121, 122, 123, 138, 139, 143, 144, 145, 146, 147, 151, 152, 153, 154, 159, 160, 165, 169, 170, 171, 172, 173, 178, 179, 180, 184, 185, 186, 187, 191, 192, 193, 194

Have a nice sunday
:-) Dirk
(24.09.2006, 09:13)

Stu:-
Deekee, this menu passes validation with the w3.org validator. Just click the link at the bottom of the page to see. ALL my demos are checked with the html validator and the css validator before uploading.
(24.09.2006, 09:26)

Stu:-
If these are 'nogo' errors then it is because I have not used actual link but "#nogo" as a temporary link.
(24.09.2006, 09:30)

Deekee:-
Hi Stu,

well I was not detailed enough it validates CSS, XHTML but not:

The links on validator.w3.org/checklink

:-) Dirk
(24.09.2006, 09:57)

Stu:-
Deekee, that explains it then. The temporary links are '#nogo', if you replace these with actual links then it will validate with /checklink.
(24.09.2006, 11:21)

bubazoo:-
how do you download ultimate dropdown menu v2?

isn't there a download link someplace on that page? I don't see it. yeah I can view the source, but that doesn't explain where the CSS code for the menu is, is it in the cssplay.css? or within the <style> tags? and then where is the HTML portion of the code? I am so confused
(29.09.2006, 16:34)

Stu:-
bubazoo, if you read my explanation on the Home page you will know where to find the demonstration. My demonstrations do need a good knowledge of CSS to be able to use and modify them to fit your needs, and this assumes that you know what to look for within the source code.
(29.09.2006, 17:19)

emoe:-
Hi Stu,

I have been learning sooo much by checking out your various css examples - thank you for sharing your knowledge!! :)

My question is this, I am trying your ultimate drop down on a page that has a flash animation directly below part of the dropdown menu. The link just above the .swf file does not show the drop down when it is hovered over. I tried adding a z-index to the .swf movie and the menu but that didn't seem to work. Any suggestions would be very much appreciated. :)
(09.10.2006, 01:02)

Stu:-
emoe, go to my page www.cssplay.co.uk/menus/drop_examples.html and towards the bottom of the page there is an answer to flash problems.
(17.10.2006, 14:27)

Lou:-
It would be awesome to get this menu to work with curved borders like the snazzy menu example...

www.cssplay.co.uk/menus/snazzymenu.html
(18.10.2006, 21:59)

Stu:-
Lou, there is a drop line version here www.cssplay.co.uk/menus/drop_line.html that can easily be adapted to a vertical drop down.
(18.10.2006, 22:04)

Lou:-
I saw the drop line example. I like how the snazzy menu works without images and works in many browser versions. I will keep trying to combine the ultimate dropdown and snazzy menu examples.
(19.10.2006, 15:54)

Houben:-
What an awesome menu. Took me a while to configure the thing to work in my website. It's working fine right now, thank you very much for it.

I am still developping, but as soon as my new site is finished I will put a link back to cssplay!

Thank you very much!
(20.10.2006, 12:47)

Mike:-
Hello!
I've tried to copy the code of this menu, everything inbetween the <div id="info"> / </div> <!-- end of info -->, and copy the css-files, link them correctly, but still there will always appear this white space (box) under the menu, where I can't add anything.

I would like to have the menu in a table;

[ ][X][ ]
[ ][Y][ ]

So that the menu would come in the table top middle, where the X is, and then so that I couls right under, where the Y is, add text.
Could You / anyone help me with this one?
(11.11.2006, 18:14)

Stu:-
Mike,
:)
If you have made an exact copy of the css then you have also copied my page
specific bottom padding
so that there is a gap between the bottom of the menu and the information.

.menu {
width:750px;
font-size:0.85em;
padding-bottom:150px;
}
Change this to
.menu {
width:750px;
font-size:0.85em;
}
(11.11.2006, 18:51)

Derrek:-
This is some great code. I have replaced the top level links with rollovers (through javascript), but once my mouse rolls off the image and onto the dropped down menu, the rollover image goes back to it's previous state. Is there a way to keep the current rolled over image until the mouse is off of the dropped down menu?
(22.11.2006, 21:22)

Stu:-
Derrek, if you have usd javascript to style the rollovers then you will need to use javascript to keep them 'rolledover'. You would be better off using CSS to do the rollovers than you can use CSS to keep them rolledover as I have done.
(22.11.2006, 21:35)

Derrek:-
I would like to take that approach instead of javascript. What would I need to add to my code to perform the image rollover in css while hovering over the drop down menu?
(22.11.2006, 23:35)

Stu:-
Derrek, instead of styling a background color change as I have on my demo, you will need to style a background image change instead.
(22.11.2006, 23:40)

Derrek:-
The problem I'm getting is that even when I copied the code, the background color of the top level changes once I roll off of it to the lower levels (2 and 3). Not only that, but when I roll over to the second level, if there is a third level it is always displayed (even if I'm not on a link that would display the third level). Once I get around this, I think I can solve the rest.
(23.11.2006, 00:03)

Derrek:-
Actually, hold that thought. I think I found my error. I'll report back if I get everything else working!
(23.11.2006, 05:51)

Malene:-
This amazing script is helping me a lot - and I have modified it to my needs. Beside one thing, which has been mentioned another place on this site by a guy named Nick.

I would like to change the width of the top level links from auto width, to a relative lenght of the text. I tried to look at the examples you gave to Nick, but I'm not good enough to see what I need to change.

Can you help me?
(24.11.2006, 13:36)

Fahed:-
I wanted to know if the following piece of your css:

------------------------------------
/* style the third level hover */
.menu ul ul ul a:hover
{
background:#b2ab9b;
}
.menu ul ul ul :hover > a
{
background:#b2ab9b;
}
------------------------------------

could be written as

------------------------------------
/* style the third level hover */
.menu ul ul ul a:hover,
.menu ul ul ul :hover > a
{
background:#b2ab9b;
}
------------------------------------

I am trying to reduce the amount of css code to make it simpler for me to understand!

Thanks again for your efforts.
(12.12.2006, 20:03)

Stu:-
Fahed, the easiest way to find out is to test it in all browsers.
(12.12.2006, 20:14)

Fahed:-
Thanks Stu.

One thing i would kindly request is for you to do another version using em's instead of px's.

As the layout of CSS Play is fixed in width and your menu only has five items, there is a lot of space to resize using px's. However, if the menu has many item and/or the site has an elastic layout based on em's, the menu goes awfully wrong when the site's font is increased.

I've tried rewriting it with em's, but my understanding/knowledge of the faulty box model hack (amongst other things) keeps on causing it to fail.

Thanks again.
(13.12.2006, 04:04)

Roman:-
Hi Stu

I have a really strange problem. I've inserted the menu in my webpage with a CMS and a phpbb. Now: Everything works fine, exeptly with IE7: In the phpbb (same html, just included) the drop down is not shown while it works with the IE7 in the CMS.

I think it's a problem while the CSS is using div's and the phpbb tables.

Please take a look: www.parkrocker.net/forums

thanks
(31.12.2006, 12:32)

Stu:-
Roman, I bet that the html is not quite the same :)
Check the doctype in the CMS and compare it to the one in the phpbb. For this to work in IE7 you must have a standards compliant doctype.
(31.12.2006, 15:18)

Roman:-
Aaaargh! You would have won the bet ;)

THANKS
(31.12.2006, 15:54)

Stu:-
Roman, thought so :) this is the first thing to look at when something works in IE6 but not IE7.
Your menu by the way is over complex with too many conditional comments. I have reduced it here to make it simpler to understand www.cssplay.co.uk/test/parkrocker.html
(31.12.2006, 16:00)

Stu:-
Roman, thought so :) this is the first thing to look at when something works in IE6 but not IE7.
Your menu by the way is over complex with too many conditional comments. I have reduced it here to make it simpler to understand www.cssplay.co.uk/test/parkrocker.html
(31.12.2006, 16:01)

Roman:-
I was such a... thanks again, now it also works on FF-Mac and Safari-Mac like a charme :)
(31.12.2006, 16:40)

Dan Mcco:-
Stu -- Great menu! I notice under ie5.5 or 6 I get a line in the boxes that have second level lists. Can't figure out why. (same happens for second level boxes that have a third)

www.gagnonsports.com/OSGC/index.htm
(06.01.2007, 05:40)

Stu:-
Dan , this is probably due to a default tables style.
(06.01.2007, 18:34)

Dan Mcco:-
Nevermind -- tried different style.
(06.01.2007, 18:53)

Jeff:-
Brilliant site, I've learned more from here than my books. Stu, can you advise how to make the top level not be a link ie just a menu title.
(19.01.2007, 17:45)

Daniel .S.:-
Hi Stu,

This is probably the best and most pure CSS menu I have seen - great work!

I have a problem, however, with it displaying in IE6 on my latest website. I think I may have accidently changed something that I shouldn't have... It's all over the place.

If you could check it out and point me in the right direction, I'd really appreciate it.

Here's the link:
www.pocklingtonhistory.com

Thanks!
Dan.
(25.02.2007, 21:39)

Stu:-
Daniel, your non-drop down top levels do not need the conditional comments. These are hiding the closing </a> tag from IE6.
(25.02.2007, 22:36)

Daniel .S.:-
Hi,

I'm sorry for the late response, I haven't had chance to work on the website yet as I've been pretty busy these past couple of weeks.

Anyway, thanks a lot for your help, I removed the comments for the non-drop down levels and it worked a treat for pulling all the floating elements together. There's just small a problem with the widths, but I'm sure I'll be able to work it out.

Thanks again =)
Dan.
(11.03.2007, 22:09)

Andrew:-
Great site, fantastic examples. Thanks for sharing these! I'm trying to use flyoutmenu2 in an iframe. The problem I'm having is that links to the right of the iframe are being rendered inactive, as if the browser is reserving space for the flyouts and giving them highest priority. This happens in all modern browsers, and only when I use iframe (a server-side include is not an option for me). Is this a z-index issue? How can I get those "underlying" links to work with the iframe?

Thanks in advance!
(29.03.2007, 17:49)

Llise:-
Hi Stu,
Thank you for your site. I have learned so much from it. But it's the first time I am trying one of your menu on my site at www.caribbean-cruises-guide.com . I had to play around with width because in IE6 the last box was coming down under the first one. It's ok now even though it does look as good as in Firefox and IE7.
BUT how can I center it under my header?
And I tried to give it a black background, which shows in IE6 but not in IE7 and Firefox?
Thank you
(24.05.2007, 19:46)

Michelle:-
In Mac Camino, the third layer doesn't work correctly--it displays all the tabs at once in an overlapping way so they can't be seen. Any suggestions?
(25.05.2007, 15:30)

Tunox:-
Hi there Stu
For someone starting off to the webdesign world your site is a great place of inspiration and learning. I'm trying to adopt this version of menu for a design but I'm stuck on adopting the exact width for each menu top level menu element. If you have some spare minutes please have a look here: techno-garden.com/stumenu/menu.html There's a brief explenation of what i want to achive and I would really appreciate your guidance on the matter.
(06.06.2007, 01:20)

Martin Hansell:-
Hi Stu,
This is great stuff as has been said already - thks. Can I ask you how you manage all content - in particular the menus? It must be a huge task, and being about the launch into designing several sites I desperately need help to chose the right technologies to run the site with.
I know it's not CSS but hey....
Many thanks
(23.07.2007, 07:41)

gavin staniforth:-
how do i download this ?
(14.08.2007, 19:09)

Houben:-
Hi there,

As I am implementing this menu, I came across some problems. I cannot really figure out why it goes wrong at my website. Since it is (still) not online, I cannot demo it to you guys.

The problem is as follows:

I have this menu. Below that I have two divs lined next to eachother with an overflow: hidden . This works fine, until I hover the menu in IE6.0. As soon as my mouse goes over the menu, my page shortens down to the lenght of the second div (right colomn).

As I am not sure if it has something to do with the menu, or with my code, I thought I'd post my problem in here. Perhaps some of you can point me into the right direction?
(20.08.2007, 12:25)

Houben:-
gavin staniforth: @ the mainpage you can read some instructions on how to get the code/css.
(20.08.2007, 12:25)

Martin:-
Hello,
I'm using the ultimate dropdown menu v2 on one of my websites. It's a really good CSS dropdown menu. I only have a top level and a second level. All 3rd level CSS code is removed. The menu works fine in IE 7, Firefox, even in IE 5.5. My problem is IE 6 when I open the page and scroll through the menu, one 2nd level width is shorter then in the CSS stylesheet defined. Instead of e.g. 235 px width only 215 px. This very annoying. Please help me with this problem. The stylesheet:
www.aj-investment.de/aji_mem_area/menu.css

The HTML-code:
www.aj-investment.de/aji_mem_area/menu.txt

The menu is placed in the midsect, naviright div.

I hope you can help. Thanks !
(01.06.2008, 09:42)



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