Mobile Friendly Website


Doing it with style

Drop scroll 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}

Post a comment

Current posts

Todd Reid:-
Stu, great work. This is really an elegent solution, and one that works so well.

(06.03.2007, 14:33)

Chris Williams:-
Noticed a problem in IE7, where when you scroll the list you can only view the first six entries whilst all the rest just disappear...
(06.03.2007, 15:44)

Chris, fixed the problem, this is another one where IE7 and IE6 handle visibility:hidden; and display:none; in different ways. So now IE7 gets display:none; and all other versions of IE get visibility:hidden;
(06.03.2007, 21:38)

Robert K:-
Don't use links that go to anchors with this one. Anchors keep the active state for the link clicked which makes the menu jerk back to the active item after you release the scrollbar.

And BTW IE 6 doesn't scroll properly with the mouse wheel.
(14.03.2007, 18:25)

coool menu... but i think it doesnt work well with mozilla as the sub menus dont scroll with the mouse....i am using mozilla 1.7.12
(15.03.2007, 18:15)

Shilpa, Mozilla isn't up to working with this one, but Netscape with IE rendering does.
Robert, in practice the links would take you to another page where the click link would no longer be active.
(16.03.2007, 10:25)

Works fine in Safari too, however Safari does not hide the menus when your mouse is over invisible links (i.e. that are not displayed, because they overflow the containing ul).
(29.03.2007, 16:58)

I transformed your 'Cross browser tabbed pages with embeded links' style to make scrollable dropdowns allover (with mitigated successess depending on the browser) but this may show me the light?
(04.04.2007, 08:46)

Richard Cranney:-
Hi Stu, Great work, love most of you menus, very nice so thanks!

Just on this menu, I've noticed that if you click on either 'United States' or 'UK' it puts a #nogo in the address bar. When this has been clicked and you scroll down (in IE 6), say you get to an E section and hover over it, it goes back to the beginning.

Any ideas?
(30.09.2007, 19:47)

You said in the description that you had an example of a multi level dropdown with scroll but it is a little buggy in IE6. I'd be interested in seeing that. I have a 3 level menu and would need a scrolling capability. I'd like it to be dynamic and pull from an asp database. Any help greatly appreciated. Thx
(30.11.2007, 16:24)

Deb, see - the second example.
(30.11.2007, 17:02)

Matt Cooper:-
Hi Stu. I'd really like to spend more time browsing your site, which I've seen improve dramatically over the past eighteen months and has been a great resource for me recently.

However, due to the four redirects I seem to be experiencing every time I click a link, I am losing patience. It's really not good as a user experience.

Consider removing whatever it is that requires this?
(04.12.2007, 05:54)

If you think fixing workarounds for IE%.x was difficult, then try IE8 Beta, now in circulation for developers and programmers. Itried this script before in IE7, but if fails to scroll in IE8. Do you have any workarounds? DOCTYPE seems to affect layout in some of your examples.
(26.05.2008, 18:15)

Hi there, thanks a million for these scripts!!! I want to use this menu for my site, it works great in FF and IE 7,8beta and 6. But because I want to use it on all the pages, I want to keep it in a css file.. BUT it doesn't work right in IE6 - it has an outline that stays after mouseovering it. I can't get the "<!--[if lt IE 7]>" part of the script to work in a css file. It only works on the page itself. Is there a way to make it work for IE6 in a CSS file? Thanks!! Here's the address I'm using during the creating phase, - (it will be )
(15.10.2008, 05:11)

The conditional comments should not be in the stylesheet. You should have the stylesheet called up in the html using:
<!--[if lt IE 7]>
<link rel="stylesheet" media="all" type="text/css" h ref="path-to-IE6-css-file.css" />
<!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" h ref="path-to-IE-css-file.css" />

The stylesheets will then be:

.menu ul li ul {display:block; visibility:hidden;}
.menu ul li a:hover ul {visibility:visible;}


.menu ul li:hover ul li,
.menu ul li a:hover ul li
scrollbar-arrow-color: #aaa;
scrollbar-3dlight-color: #888;
scrollbar-highlight-color: #666;
scrollbar-face-color: #444;
scrollbar-shadow-color: #000;
scrollbar-darkshadow-color: #888;
scrollbar-track-color: #363636;
(15.10.2008, 09:35)

Hi Stu, thanks for your help, I did as you said and it works... But it won't work if I have the Menu code in a (separate) css file. In other words, do I have to have the menu script in the html file?
Here are the 3 different versions that I did.

Menutest3 has the menu included in the html file. But I'd rather it all be on separate css files. (is that possible?)

Thanks again so much!! You're such a help!
(16.10.2008, 08:54)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page