Copy & paste the code below to embed this comment.
Mickey Kamer
I think this article was great and found it to be very much a good starting point. However, I also have accessibility concerns when using any of the vertical or horizontal menus that allow drop downs, or roll outs. What use are the sub links if I cannot get to them as a blind user or mobility impaired user?
For example, try it yourself. Since I am blind (for example only, I am sighted) I only use a keyboard. A mouse would take forever to find a link I needed, so I must use TAB, and the Arrow keys. Using tab I can get to the main menu items, but I cannot get to any of the sub list items. I even tried the tabindex attribute, no such luck. So I was thinking about trying the accesskey, well that still doesn’t work.
So, if you are going to use a menu like this and are providing information that a customer, vendor, or employee will need in order to use that information for their job, to place an order, or to find deeper information, you are eliminating a large chunk of web users. I am not specific to just blind users either. I am taking about those users that must use other forms of navigation other than “see, point, and click.”
Copy & paste the code below to embed this comment.
Richard Price
Hey Nick,love your menu but have am having a problem. I am also using ul on the page. The script seems to be overriding everything that i try. I tried using #nav infront of the link, and even putting an inline style, but the only thing that I can make work is using and ol and overriding the list type. Has anyone else run across this problem? I would appreciate any advise. Thanks.
I had major problems until I removed all references to “padding” from my css classes and ids (other than those relating to the nav ul). Instead I am using html “cellpadding=xx” for table tags. Don’t like to do that but oh well.
The only problem I still have with IE Mac is that after you follow a link from the menu, if you use the browser “back” button, the menu that popped up is still there and won’t go away.
id read carefully the article again and again, i´d saved the example page locally and… doesnt work i download the js, i had validated the path, but still doesnt work im a noob about css but im inproving it reading a lot but i like soo much that menu ! if some boy can explain why i appreciate it so much !
Copy & paste the code below to embed this comment.
Garrett Garman
I’m trying to use this menu but when I download the example and open it locally on my machine in Netscape, Opera, Firefox and it doesn’t work. It’s wierd because the example menu works on the web in those browsers. If anyone can give me a reason why this is I would really appreciate it.
Hi I was studying this article, and made some good things with it… but now I’m needing to do an 3 level menu, and using your css and just adding a new level, the menu crashs and does’nt work well.
You could see some example of what I’m doing here: http://www.aventuradiet.com.br/apocalypse/index.php
I really like this menu and I have been playing with it for some time now. One thing I don’t know how to do and I can’t seem to figure out is when you mouse out I don’t want the menu to disappear until you mouse over another link. Is that possible? If so how would one change the JS code to do this?
During the development of this article, I uncovered a strange bug that I believe is only apparent in IE6. A background must be declared on the li a, else when a sub-menu stretches further (vertically) than the main menu itself, the links start to disappear before you have time to click them. Strange! Try it to see for yourself.”
Putting in the background makes the menu elements disappear with Linux Galeon. Removing the background (background: #fff;) makes the problem disappear. I know that IE is more popular, but I’m still going to try to figure out how to make it work for both. Wish me luck.
I discovered the solution to my own problem (the problem is: in IE5 for the Mac, if you follow a link and then use the browser back button to go back to the menu, the submenu that popped up before is still there and won’t go away): added the following to the [removed]
Talking about menus, i’d like to show you one of mine ideas. It’s not really drop-down, but maybe this is a good place to do this.
At www.itgmarinoni.it you can see the top navigation bar in the header (two anchors). Those two links are “inside” the header’s image). For explanations look at the css (www.itgmarinoni.it/src/css/cwm.css).
Copy & paste the code below to embed this comment.
Greg
I’m a newbie and want to get this to work. The sample link provided works fine for me in IE6. But the one I created for myself only works in Firefox, etc… In IE6, the menus pop out when I hover, but they don’t go away when I ‘dehover’
Copy & paste the code below to embed this comment.
mike b
Does anyone have a workaround for the problem with <select> menus? the vertical or horizontal dropdowns display behind select menus in both mozilla browsers and I.E. on windows platform. It is not possible to simply either hide or turn off the visibility of each <select> element by assigning it an id—there are several on each page that are affected and there are thousands of pages in the site.
Copy & paste the code below to embed this comment.
Maru
One less pleasant thing with CSS menus is that they disappear the moment you hover out of focus, and you’d have to start ‘menuing’ all over again.
A way around this is to add some padding (top, right, bottom) to the ul’s, and compensate the top with a negative margin.
Of course IE doesn’t play along here: it doesn’t grant the additional padding height. One way around this is to set a (1 pixel transparent) background image.
I haven’t tested it thoroughly on all browsers, but it works on Op7, FF1, IE5/5.5/6, Konqueror.
i have used this from the article and i’m wondering if it’s possible to make it work like it should. Now, if you go over Test2, it shows Option1 and Option2 but also link1,2,3,4. What i want to know is: Is it possible to make the menu more complicated, like..more options to choose from.
thanks in advance and i hope my explanation on this was clear.
Copy & paste the code below to embed this comment.
Scott R. Godin
IIRC horizontal goes this way:
<—————><—————><—————>
Vertical, which is what this menu is, goes this way:
<—————>
<—————>
<—————>
the worst part is, in clicking thru the first few pages of the discusion section to see if this issue had been raised ( why can I not request to see ALL of the discussion in a single page so I can use firefox’s find feature more quickly? ) It seemed as though everyone else had accepted this reversal of the meaning of horizontal and vertical.
Copy & paste the code below to embed this comment.
Vicky Mardall
Hi
Despite all the chat about repetitions, this tutorial has been invaluable to me despite having read other articles about nested lists. This was the cleanest solution I have found to date. However, although I have managed to create it on my page so it works fine in IE (bizarrely enough without using the Holly Hack), my sub links don’t work on any other browser and they display oddly. My test page is at: http://www.azuremarketing.com/cssAzure/index_test.htm and I have so far only added links from one section.
I’m sorry if something has already been written about this in the discussion previously, but I’ve had a trawl through and can’t find any reference to it.
I’ve been through my links and it may be that I’ve consused something through my use of an additional div.
Copy & paste the code below to embed this comment.
Swizec
I’ve been trying to get this code to show multiple menus as the menu I need is in a php loop and is shown multiple times with some changes done to it, the entries differ.
Now the problem is that in IE and Opera only the first instance of the menu works and others only show the main ul and don’t “dropdown” but in firefox everything works perfectly.
Copy & paste the code below to embed this comment.
Swizec
I’ve been trying to get this code to show multiple menus as the menu I need is in a php loop and is shown multiple times with some changes done to it, the entries differ.
Now the problem is that in IE and Opera only the first instance of the menu works and others only show the main ul and don’t “dropdown” but in firefox everything works perfectly.
296 Reader Comments
Back to the Articlerivers
I does not work with this code made by youre article:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
[removed]
startList = function() {
if (document.all&&document;.getElementById) {
navRoot = document.getElementById(“nav”);
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName==“LI”) {
node. {
this.className+=” over”;
}
node. {
this.className=this.className.replace»
(” over”, “”);
}
}
}
}
}
window.
[removed]
<style type=“text/css”>
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px dotted #000000;
}
li ul {ul li {
position: relative;
}
position: absolute;
left: 149px;
top: 0;
display: none;
} ul li a {
display: block;
text-decoration: none;
color: #000000;
background: #00ccff;
padding: 5px;
border: 1px dotted #000000;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
/* End */
li:hover ul, li.hover ul {
display: block; }
<ul id=“nav”>
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Team</li>
<li>Offices</li>
</ul>
</li>
<li>Services
<ul>
<li>Web Design</li>
<li>[url=”#”]Internet
Marketing[/url]</li>
<li>Hosting</li>
<li>Domain Names</li>
<li>Broadband</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>United Kingdom</li>
<li>France</li>
<li>USA</li>
<li>Australia</li>
</ul>
</li>
</ul>
</body>
</html>
What am i doin wrong?
Greetz
Rivers
Mickey Kamer
I think this article was great and found it to be very much a good starting point. However, I also have accessibility concerns when using any of the vertical or horizontal menus that allow drop downs, or roll outs. What use are the sub links if I cannot get to them as a blind user or mobility impaired user?
For example, try it yourself. Since I am blind (for example only, I am sighted) I only use a keyboard. A mouse would take forever to find a link I needed, so I must use TAB, and the Arrow keys. Using tab I can get to the main menu items, but I cannot get to any of the sub list items. I even tried the tabindex attribute, no such luck. So I was thinking about trying the accesskey, well that still doesn’t work.
So, if you are going to use a menu like this and are providing information that a customer, vendor, or employee will need in order to use that information for their job, to place an order, or to find deeper information, you are eliminating a large chunk of web users. I am not specific to just blind users either. I am taking about those users that must use other forms of navigation other than “see, point, and click.”
Richard Price
Hey Nick,love your menu but have am having a problem. I am also using ul on the page. The script seems to be overriding everything that i try. I tried using #nav infront of the link, and even putting an inline style, but the only thing that I can make work is using and ol and overriding the list type. Has anyone else run across this problem? I would appreciate any advise. Thanks.
Margrit McIntosh
I had major problems until I removed all references to “padding” from my css classes and ids (other than those relating to the nav ul). Instead I am using html “cellpadding=xx” for table tags. Don’t like to do that but oh well.
The only problem I still have with IE Mac is that after you follow a link from the menu, if you use the browser “back” button, the menu that popped up is still there and won’t go away.
—margrit
Luis Limada
Congrats ! beautifull work here…
id read carefully the article again and again, i´d saved the example page locally and… doesnt work i download the js, i had validated the path, but still doesnt work im a noob about css but im inproving it reading a lot but i like soo much that menu ! if some boy can explain why i appreciate it so much !
Garrett Garman
I’m trying to use this menu but when I download the example and open it locally on my machine in Netscape, Opera, Firefox and it doesn’t work. It’s wierd because the example menu works on the web in those browsers. If anyone can give me a reason why this is I would really appreciate it.
rafael apocalypse
Hi I was studying this article, and made some good things with it… but now I’m needing to do an 3 level menu, and using your css and just adding a new level, the menu crashs and does’nt work well.
You could see some example of what I’m doing here: http://www.aventuradiet.com.br/apocalypse/index.php
If you could, please help me!!
my email is: r’dot’apocalypse’at’gmail’dot’com
thank’s
Jay
I really like this menu and I have been playing with it for some time now. One thing I don’t know how to do and I can’t seem to figure out is when you mouse out I don’t want the menu to disappear until you mouse over another link. Is that possible? If so how would one change the JS code to do this?
moltar
I was looking how to make “safe” horizontal lists for a long time. This is a great way to do this! I am impressed.
GianPiero
Does anyone have any idea how to make the first set of buttons have different colour backgrounds (eg. First button is blue, next red etc.)?
I have been trying for quite some time and I can’t get it to work.
Laurent LaBrie
On your page,
“Mystery IE6 Bug:
During the development of this article, I uncovered a strange bug that I believe is only apparent in IE6. A background must be declared on the li a, else when a sub-menu stretches further (vertically) than the main menu itself, the links start to disappear before you have time to click them. Strange! Try it to see for yourself.”
Putting in the background makes the menu elements disappear with Linux Galeon. Removing the background (background: #fff;) makes the problem disappear. I know that IE is more popular, but I’m still going to try to figure out how to make it work for both. Wish me luck.
—-ljl
Margrit McIntosh
I discovered the solution to my own problem (the problem is: in IE5 for the Mac, if you follow a link and then use the browser back button to go back to the menu, the submenu that popped up before is still there and won’t go away): added the following to the [removed]
node.onclick=function()
{
this.className=this.className.replace(” over”, “”);
}
so that the whole script is:
startList = function()
{
if (document.all&&document;.getElementById)
{
navRoot = document.getElementById(“nav”);
for (i=0; i<navRoot.childNodes.length; i++)
{
node = navRoot.childNodes;
if (node.nodeName==“LI”)
{
node.
{
this.className+=” over”;
}
node.
{ this.className=this.className.replace(” over”, “”);
}
node.
{
this.className=this.className.replace(” over”, “”);
}
}
}
}
}
window.
—Margrit
bill
How about sub menus that always display at the top, instead of just to the right of your current mouseover?
Justin van Didden
I have been looking for a solution for menu’s to display over an iframe.
I have experienced problems with javascript menus, and this css version, displaying under the iframe content.
Does anyone have any clues as to how the iframe content can be set to display below the drop down menu?
I must use iframes to clip other web content and can’t avoid using them.
Any help appreciated
Justin
Piero Fissore
Talking about menus, i’d like to show you one of mine ideas. It’s not really drop-down, but maybe this is a good place to do this.
At www.itgmarinoni.it you can see the top navigation bar in the header (two anchors). Those two links are “inside” the header’s image). For explanations look at the css (www.itgmarinoni.it/src/css/cwm.css).
Have anyone of you ever done a menu like this?
Greg
I’m a newbie and want to get this to work. The sample link provided works fine for me in IE6. But the one I created for myself only works in Firefox, etc… In IE6, the menus pop out when I hover, but they don’t go away when I ‘dehover’
Any help would be greatly appreciated.
mike b
Does anyone have a workaround for the problem with <select> menus? the vertical or horizontal dropdowns display behind select menus in both mozilla browsers and I.E. on windows platform. It is not possible to simply either hide or turn off the visibility of each <select> element by assigning it an id—there are several on each page that are affected and there are thousands of pages in the site.
Neal Krouse
I love this article. I recreated it and tried to add another level of sub menus, but I can’t make it work in IE. It works in Netscape without issue.
I’ve tried variations of CSS where Behaviors are used, but Behaviors don’t work in IE/Mac.
How can you make drop-down menus with multiple sublevels work?
Maru
One less pleasant thing with CSS menus is that they disappear the moment you hover out of focus, and you’d have to start ‘menuing’ all over again.
A way around this is to add some padding (top, right, bottom) to the ul’s, and compensate the top with a negative margin.
Of course IE doesn’t play along here: it doesn’t grant the additional padding height. One way around this is to set a (1 pixel transparent) background image.
I haven’t tested it thoroughly on all browsers, but it works on Op7, FF1, IE5/5.5/6, Konqueror.
Cheers,
Marcel.
Robert Kramer
<ul id=“nav”>
<li>Home</li>
<li>Test</li>
<ul>
<li>Regular</li>
<li>Commissions</li>
<li>Organisation</li>
</ul>
</li>
<li>Test2
<ul>
<li>Option1</li>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
<li>Option2</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>United Kingdom</li>
<li>France</li>
<li>USA</li>
<li>Australia</li>
</ul>
</li>
</ul>
i have used this from the article and i’m wondering if it’s possible to make it work like it should. Now, if you go over Test2, it shows Option1 and Option2 but also link1,2,3,4. What i want to know is: Is it possible to make the menu more complicated, like..more options to choose from.
thanks in advance and i hope my explanation on this was clear.
Scott R. Godin
IIRC horizontal goes this way:
<—————><—————><—————>
Vertical, which is what this menu is, goes this way:
<—————>
<—————>
<—————>
the worst part is, in clicking thru the first few pages of the discusion section to see if this issue had been raised ( why can I not request to see ALL of the discussion in a single page so I can use firefox’s find feature more quickly? ) It seemed as though everyone else had accepted this reversal of the meaning of horizontal and vertical.
aCk!!
Vicky Mardall
Hi
Despite all the chat about repetitions, this tutorial has been invaluable to me despite having read other articles about nested lists. This was the cleanest solution I have found to date. However, although I have managed to create it on my page so it works fine in IE (bizarrely enough without using the Holly Hack), my sub links don’t work on any other browser and they display oddly. My test page is at: http://www.azuremarketing.com/cssAzure/index_test.htm and I have so far only added links from one section.
I’m sorry if something has already been written about this in the discussion previously, but I’ve had a trawl through and can’t find any reference to it.
I’ve been through my links and it may be that I’ve consused something through my use of an additional div.
Any advise would be really appreciated.
Many thanks
Vicky
Swizec
I’ve been trying to get this code to show multiple menus as the menu I need is in a php loop and is shown multiple times with some changes done to it, the entries differ.
Now the problem is that in IE and Opera only the first instance of the menu works and others only show the main ul and don’t “dropdown” but in firefox everything works perfectly.
Any ideas on how this would be fixed?
Swizec
I’ve been trying to get this code to show multiple menus as the menu I need is in a php loop and is shown multiple times with some changes done to it, the entries differ.
Now the problem is that in IE and Opera only the first instance of the menu works and others only show the main ul and don’t “dropdown” but in firefox everything works perfectly.
Any ideas on how this would be fixed?
Greg
Is there a way to develop this in a similar manner, except this time horizontal rather than vertical…
Im really new to CSS so i wont be able to do it myself :(
johnq
“Is there a way to develop this in a similar manner, except this time horizontal rather than vertical…”
There is a link in the article to the original menu that this one was derived from, which was horizontal:
http://www.alistapart.com/articles/dropdowns/
http://www.htmldog.com/articles/suckerfish/example/