Alrighty. I stumbled across this page last night, and I am happier. I’ve been looking for an ‘easy’ way to do just what this script does.
But, in trying to make NS7.1, IE6, Opera7.23 happy, I am struggling. I’m in the process of re-laying out my site and need to at least get the top2.htm file right so I can include it across the board. That might be wise, but it’s a work in progress.
Can someone tell me why my menu is centered in NS, but not Opera or IE? I think it’s a margin issue…
this be the BSS beast that keeps growing..
http://wanderingproductions.com/images/main.css
and this is the page:
http://wanderingproductions.com/top2.htm
as you can see, the pic is centered. the rest ain’t (outside of NS7). I am… perplexed.
Copy & paste the code below to embed this comment.
matt
Sean and Dante,
I guess giving out advice is easy from your lofty position. I mean, inventing a browser with no refresh, that doesn’t show you what page you are on and that can’t even spell the month correctly – that’s pretty intense stuff.
I was working on a DHTML menu when discover this CSS Dropdown and love it. But there’s some things that I wish to know (all about graphical interface):
1. How to implement a css rollover for the first list and a different rollover for the second one. (I have one working great in Mozilla Firebird but doesn’t work in IE6 and Opera 7).
2. Is it possible to use this CSS Dropdown menu to make something like the http://www.mediatemple.net/ navigation?
Copy & paste the code below to embed this comment.
J
Noemi, thanks for your tip on Z index! I thought it could be done, just didn’t remember the name for it. :)
Now for my next confusion: can these be more than 3 menus/links/divs wide? I noticed the examples using this are just three. Is this because the divs/LIs are float left, none, and right? Could I make more menus by using a table first then put each div/LI in a td and not use the float?
Copy & paste the code below to embed this comment.
Kurt H. Kiley
I was wondering if anyone tried pre-caching the background image for the drop down menu, as you would for javascript rollovers.
It would appear that IE is not caching the image, obviously. It is interesting that changing the setting for “check for new versions of cached pages” to anything but “every visit to page” corrects the situation.
It never was necessary for Javascript rollovers, where you would change the source of the image, once the image was downloaded, it remained.
Copy & paste the code below to embed this comment.
Gary
Let me add my congratulations on this clean solution that works so well.
With your UL/LI drop down menu in place, is there a way to structure things so that unordered lists in the text below these menus can be presented in its default (or similar to default) format?
Copy & paste the code below to embed this comment.
J
I tried two different approaches to this. Maybe you will have better luck than I did.
First was to give a class (or id) to all the lists used in the menus, with the thought that lists elsewhere in the site wouldn’t inherit the styles for the menus that way. But I didn’t find a way to do that and keep the menus functioning.
Second was make a standard list class with basics defined, so that other lists on the site would use that class and look as defined. This one didn’t work for me, as my lists were coming from a content editable area, and so users wouldn’t know to add the style.
Perhaps those will give you some ideas. Good luck.
A Colleague saw this script on this site ages
ago and sent it to me so that i could try and turn this into a vertical navigation but yet again it’s got bugs! as it doesn’t work properly in IE6 yet it does in all the other browsers that i have tried (can anybody help with this one!
Copy & paste the code below to embed this comment.
Will Thompson
Hi,
I’ve been playing around, trying to find some way of making the second level be displayed horizontally, and I’ve come to the conclusion that I can’t, at least, not with the Suckerfish and my knowledge of CSS… Any ideas? The problem is that the width of the parent li has to be wide enough to hold all the child lis, but narrow enough to be a tab. Maybe I could slide each tab across, so that they overlap, but then it needs to know which tab it is.
Copy & paste the code below to embed this comment.
Doug Baker
Thanks so much for this great tutorial! It’s a holy grail, that’s for sure.
I’m using the menu system for a design in process, and I encountered something that should be noted for others who also wish to use this system.
If your menu drops down over any element that is positioned relatively, the dropped down menu disappears behind that relatively positioned element in IE/6 Win, regardless of what z-index you give the menu.
You sholud give a higher z-index and relativ position to the parent element of your menu which is on the same level or higher then other positioned elements.
The menu doesn’t seem to work in Moz/Firebird/Net when you use the “overflow: auto;” css-style on the content below. If you hover over the links with these browsers, the menu hides when you move the coursor over the content below. In Explorer and Opera it works fine…
Copy & paste the code below to embed this comment.
Chris Cannon
Ok so in the example, the first element in the list has a clickable region that is the entire box, not just the text. The ones bellow the first element in any of the drop downs, has a clickable region of only the text, is there a way to fix it so that all of the links in the drop down have a clickable region of the entire box and not just the text?
Really like the menus, already got plans to implement them in one site, and will be keeping an eye on this site for the more drop down levels. That would make the script excellent.
Copy & paste the code below to embed this comment.
Dagmar
My menu flickers in Netscape 6.2.3. It seems like the only solution here is to wait for browser updates. Has anyone found an answer to this problem yet?
Copy & paste the code below to embed this comment.
wink
The Suckerfish example doesn’t seem to work on Netscape 6.2.2 on MacOs9. Has anyone else experienced this? Is it just my machine or is it a problem with that version of the browser? Has anyone found a workaround?
Previous comments have pointed out that there’s a big problem in Safari 1.0, although the dropdowns work fine in Safari 1.1 (apparently, Apple fixed the bug). From reading all the comments, the Safari 1.0 problem seems to be the worst issue with the menu.
Here’s a workaround. This uses JavaScript to detect Safari 1.0, and keeps the second-level menu hidden from that browser only.
Insert the following immediately above the </head> tag:
[removed]<!—
function BrowserDetect() {
var ua = navigator.userAgent.toLowerCase();
this.isSafari = (ua.indexOf(‘safari’) != – 1);
this.versionMinor = parseFloat(navigator.appVersion);
this.isSafari10 = ((this.isSafari) && (this.versionMinor < 87));
if (this.isSafari10 == true) {
[removed](’<style type=“text/css”>li li {display: none}<\/style>’);
}
}
var browser = new BrowserDetect();
//—>[removed]
You could put the JavaScript in a separate file, of course, but the reference to it needs to be located after the CSS, in the <head>.
I copied most of these lines of code from the Browser Detect script by Chris Nott, which is available under a Creative Commons license at http://www.dithered.com/javascript/browser_detect/
Note that (1) the version number in Safari’s user agent string is the build number, not 1.0 or 1.1; and (2) I don’t know the correct number to use in the script. 87 may not be the best. All I know is that I’m using Safari 1.0.1 (with OS 1.2.8) and it is version 85.6. I don’t know what version was the first for Safari 1.1. (I didn’t see it in a quick look at Dave Hyatt’s blog.) If someone knows the answer, please post it.
Using the above code, Safari 1.0.1 displays only the top-level menu with working links, while the dropdown menus work in other browsers.
If someone has a vertical popup/“dropdown” menu that is ready for prime time, I’d love to see it; and use the code, if you’re willing to share.
I’ve been trying to create a vertical version, where the second-level menus open to the left. After spending a couple days, including looking at a few prominent CSS sites for ideas (including Listamatic), I nearly succeeded, but have given up. From what I can tell, browser support is not good enough yet to implement this on a business web site for a paying client.
Eric Meyer came close
http://www.meyerweb.com/eric/css/edge/menus/demo.html
But it only works in some browsers, and some important details are not so great (on mouseover, the menu “title” disappears from top-level menu). Not good enough for my needs.
Given that a CSS-only solution is NOT ready for prime time, I would like to find a JavaScript substitute that meets ALA’s usual criteria: high-quality, high standards-compliance, lightweight, portable, customizable. Of course, it needs to work in nearly all browsers, especially IE/Win.
Is there any way to link to an external stylesheet that will do the same thing? I’d like to use this IE hack, but I’m trying to keep my web pages clean.
I have created left and right side vertical menus and a “drop-up” menu examples using :hover and my emulator behavior.
No CSS hacks or additional elements, so you should choose your favourite one to make these basic functional menus perfect.
Tested:Ie6Win/FireBird 0.7.
Copy & paste the code below to embed this comment.
Harley Jacoubsen
Larry’s aforementioned code seems to grab the “spoofed” Mozilla version number (which is “5”) rather than the Safari build number. As a result, using his code appears to disable the drop down functionality for all versions of Safari, not just the pre-Panther versions.
I managed to cook up the following code which appears to grab the correct build number. Note that Javascript is not at all my specialty, so some of you will undoubtably find “opportunities for improvement.” :)
// Sniff pre v.86 versions of Safari
var agt = navigator.userAgent.toLowerCase();
var appVer = navigator.appVersion.toLowerCase();
var is_safari = (agt.indexOf(“safari”) != -1);
var build = appVer.substring(appVer.lastIndexOf(”/”)+1);
if (build < 86) {
[removed](’<style type=“text/css”>li:hover ul { display: none } </style>’);
}
Copy & paste the code below to embed this comment.
William Ellis
Fixed a couple of problems for you and got it to validate. I got it to work as (I think) you intended in MSIE 6.0, Netscape 7.1, Opera 7.23, Mozilla/Firebird 0.7, K-Meleon 0.8.2. The main to the css changes were:
I am still having issues with my site on Mac browsers. Unfortunately I do not have easy access to a Mac so turnaround is slow. If anyone has any advice I would sure appreciate it.
-William Ellis
Copy & paste the code below to embed this comment.
Mark
I’m working on a website for school and my teacher refuses to give up frames. He wants a drop-down menu in a typical side-bar fashion. After trying this example, my drop-downs go outside of the frame so they aren’t much good.
I was looking at two solutions, and was wondering if anybody here could help me with either of them.
Solution 1: Code the drop-downs in such a way so that the drop-downs push the lower options out of the way, in the same column. Example(hope this works):
Heading 1
Heading 2
Heading 3
And when mouse hovers on Heading 2, you get:
Heading 1
Heading 2
Option 1
Option 2
Heading 3
You get the idea, right?
Solution 2 (may be easier?): His main objections to tables instead of frames is that it’s easier to maintain one menu file. So, I was wondering if it would be possible to add in a special HREF that would embed the code for the menu into the table, without having to copy it again. I hope you can understand what I mean…
Thanks for the help, and I’m finding this to be a great site for information.
128 Reader Comments
Back to the ArticleJanos horvath
I have created a simple behavior (.htc script) for IE5+ browsers to emulate :hover sub-classes with help of normal classes.
And creted an example for drop-down lists.
You can find it here:
http://www.hszk.bme.hu/~hj130/css/list_menu/hover/index.html
tb
Alrighty. I stumbled across this page last night, and I am happier. I’ve been looking for an ‘easy’ way to do just what this script does.
But, in trying to make NS7.1, IE6, Opera7.23 happy, I am struggling. I’m in the process of re-laying out my site and need to at least get the top2.htm file right so I can include it across the board. That might be wise, but it’s a work in progress.
Can someone tell me why my menu is centered in NS, but not Opera or IE? I think it’s a margin issue…
this be the BSS beast that keeps growing..
http://wanderingproductions.com/images/main.css
and this is the page:
http://wanderingproductions.com/top2.htm
as you can see, the pic is centered. the rest ain’t (outside of NS7). I am… perplexed.
thanks folks
tb
matt
Sean and Dante,
I guess giving out advice is easy from your lofty position. I mean, inventing a browser with no refresh, that doesn’t show you what page you are on and that can’t even spell the month correctly – that’s pretty intense stuff.
http://www.geocities.com/seanmhall2003/homepage.html
Matt
Alex
I was working on a DHTML menu when discover this CSS Dropdown and love it. But there’s some things that I wish to know (all about graphical interface):
1. How to implement a css rollover for the first list and a different rollover for the second one. (I have one working great in Mozilla Firebird but doesn’t work in IE6 and Opera 7).
2. Is it possible to use this CSS Dropdown menu to make something like the http://www.mediatemple.net/ navigation?
Thanks in advance.
J
Noemi, thanks for your tip on Z index! I thought it could be done, just didn’t remember the name for it. :)
Now for my next confusion: can these be more than 3 menus/links/divs wide? I noticed the examples using this are just three. Is this because the divs/LIs are float left, none, and right? Could I make more menus by using a table first then put each div/LI in a td and not use the float?
..something like that?
Kurt H. Kiley
I was wondering if anyone tried pre-caching the background image for the drop down menu, as you would for javascript rollovers.
It would appear that IE is not caching the image, obviously. It is interesting that changing the setting for “check for new versions of cached pages” to anything but “every visit to page” corrects the situation.
It never was necessary for Javascript rollovers, where you would change the source of the image, once the image was downloaded, it remained.
Gary
Let me add my congratulations on this clean solution that works so well.
With your UL/LI drop down menu in place, is there a way to structure things so that unordered lists in the text below these menus can be presented in its default (or similar to default) format?
J
I tried two different approaches to this. Maybe you will have better luck than I did.
First was to give a class (or id) to all the lists used in the menus, with the thought that lists elsewhere in the site wouldn’t inherit the styles for the menus that way. But I didn’t find a way to do that and keep the menus functioning.
Second was make a standard list class with basics defined, so that other lists on the site would use that class and look as defined. This one didn’t work for me, as my lists were coming from a content editable area, and so users wouldn’t know to add the style.
Perhaps those will give you some ideas. Good luck.
Simmo
A Colleague saw this script on this site ages
ago and sent it to me so that i could try and turn this into a vertical navigation but yet again it’s got bugs! as it doesn’t work properly in IE6 yet it does in all the other browsers that i have tried (can anybody help with this one!
<html>
<head>
<title>Test CSS Vertical Navigation</title>
<meta http-equiv=“Content-Type” c charset=iso-8859-1”>
[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 {
padding: 0;
margin: 0;
list-style: none;
}
li {
position: relative;
width: 160px;
}
li a {
color: #FFFFFF;
text-decoration: none;
background-color: #939E7E;
display: block;
text-indent: 15px;
font: normal 12px/20px verdana;
border-top: 1px solid #FFFFFF;
width: 160px;
}
li a:hover {
color: #284100;
background-color: #D6DACD;
display: block;
width: 160px;
}
ul li ul {
display: none;
position: absolute;
top: 0;
left: 0;
margin-left: 160px;
}
li > ul {
top: 0;
left: 0;
}
li:hover ul, li.over ul {
display: block;
}
li#last {
width: 160px;
margin-right: 0px;
}
li#last a {
width: 160px;
}
#left {
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id=“left”>
<ul id=“nav”>
<li>Main menu
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
<li>Next menu
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</ul>
</div>
</body>
</html>
Will Thompson
Hi,
I’ve been playing around, trying to find some way of making the second level be displayed horizontally, and I’ve come to the conclusion that I can’t, at least, not with the Suckerfish and my knowledge of CSS… Any ideas? The problem is that the width of the parent li has to be wide enough to hold all the child lis, but narrow enough to be a tab. Maybe I could slide each tab across, so that they overlap, but then it needs to know which tab it is.
Thanks,
Will Thompson
Doug Baker
Thanks so much for this great tutorial! It’s a holy grail, that’s for sure.
I’m using the menu system for a design in process, and I encountered something that should be noted for others who also wish to use this system.
If your menu drops down over any element that is positioned relatively, the dropped down menu disappears behind that relatively positioned element in IE/6 Win, regardless of what z-index you give the menu.
Thanks again! It’s awesome.
Janos horvath
You sholud give a higher z-index and relativ position to the parent element of your menu which is on the same level or higher then other positioned elements.
[div id=“positionedelement” style=“position:relative;z-index:1”]
[/div]
[div id=“menu” style=“position:relative;z-index:2”]
[ul][li]list1
[ul]submenu[/ul]
[/li][/ul]
[/div]
[div id=“positionedelement” style=“position:relative;z-index:1”]
[/div]
Michael G
The menu doesn’t seem to work in Moz/Firebird/Net when you use the “overflow: auto;” css-style on the content below. If you hover over the links with these browsers, the menu hides when you move the coursor over the content below. In Explorer and Opera it works fine…
Check it out:
http://www.acc.umu.se/~caran/barebone.html
I dont know if its a flaw in the code or the browser… Do you know?
Chris Cannon
Ok so in the example, the first element in the list has a clickable region that is the entire box, not just the text. The ones bellow the first element in any of the drop downs, has a clickable region of only the text, is there a way to fix it so that all of the links in the drop down have a clickable region of the entire box and not just the text?
Phil Barnes
Really like the menus, already got plans to implement them in one site, and will be keeping an eye on this site for the more drop down levels. That would make the script excellent.
Will try and see if I can help out with that.
Dagmar
My menu flickers in Netscape 6.2.3. It seems like the only solution here is to wait for browser updates. Has anyone found an answer to this problem yet?
Dagmar
wink
The Suckerfish example doesn’t seem to work on Netscape 6.2.2 on MacOs9. Has anyone else experienced this? Is it just my machine or is it a problem with that version of the browser? Has anyone found a workaround?
Larry Israel
Previous comments have pointed out that there’s a big problem in Safari 1.0, although the dropdowns work fine in Safari 1.1 (apparently, Apple fixed the bug). From reading all the comments, the Safari 1.0 problem seems to be the worst issue with the menu.
Here’s a workaround. This uses JavaScript to detect Safari 1.0, and keeps the second-level menu hidden from that browser only.
Insert the following immediately above the </head> tag:
[removed]<!—
function BrowserDetect() {
var ua = navigator.userAgent.toLowerCase();
this.isSafari = (ua.indexOf(‘safari’) != – 1);
this.versionMinor = parseFloat(navigator.appVersion);
this.isSafari10 = ((this.isSafari) && (this.versionMinor < 87));
if (this.isSafari10 == true) {
[removed](’<style type=“text/css”>li li {display: none}<\/style>’);
}
}
var browser = new BrowserDetect();
//—>[removed]
You could put the JavaScript in a separate file, of course, but the reference to it needs to be located after the CSS, in the <head>.
I copied most of these lines of code from the Browser Detect script by Chris Nott, which is available under a Creative Commons license at http://www.dithered.com/javascript/browser_detect/
Note that (1) the version number in Safari’s user agent string is the build number, not 1.0 or 1.1; and (2) I don’t know the correct number to use in the script. 87 may not be the best. All I know is that I’m using Safari 1.0.1 (with OS 1.2.8) and it is version 85.6. I don’t know what version was the first for Safari 1.1. (I didn’t see it in a quick look at Dave Hyatt’s blog.) If someone knows the answer, please post it.
Using the above code, Safari 1.0.1 displays only the top-level menu with working links, while the dropdown menus work in other browsers.
Larry Israel
Corrections: The title of my post should have been “Safari 1.0 workaround” (not 1.1). And I’m using Mac OS X 10.2.8 (last Jaguar version).
Also note that I’m not a JavaScript wizard, so someone may be able to improve the code.
Larry Israel
If someone has a vertical popup/“dropdown” menu that is ready for prime time, I’d love to see it; and use the code, if you’re willing to share.
I’ve been trying to create a vertical version, where the second-level menus open to the left. After spending a couple days, including looking at a few prominent CSS sites for ideas (including Listamatic), I nearly succeeded, but have given up. From what I can tell, browser support is not good enough yet to implement this on a business web site for a paying client.
Eric Meyer came close
http://www.meyerweb.com/eric/css/edge/menus/demo.html
But it only works in some browsers, and some important details are not so great (on mouseover, the menu “title” disappears from top-level menu). Not good enough for my needs.
Given that a CSS-only solution is NOT ready for prime time, I would like to find a JavaScript substitute that meets ALA’s usual criteria: high-quality, high standards-compliance, lightweight, portable, customizable. Of course, it needs to work in nearly all browsers, especially IE/Win.
Joel Young
Is there any way to link to an external stylesheet that will do the same thing? I’d like to use this IE hack, but I’m trying to keep my web pages clean.
Janos horvath
I have created left and right side vertical menus and a “drop-up” menu examples using :hover and my emulator behavior.
No CSS hacks or additional elements, so you should choose your favourite one to make these basic functional menus perfect.
Tested:Ie6Win/FireBird 0.7.
http://www.hszk.bme.hu/~hj130/css/list_menu/hover/index.html
Harley Jacoubsen
Larry’s aforementioned code seems to grab the “spoofed” Mozilla version number (which is “5”) rather than the Safari build number. As a result, using his code appears to disable the drop down functionality for all versions of Safari, not just the pre-Panther versions.
I managed to cook up the following code which appears to grab the correct build number. Note that Javascript is not at all my specialty, so some of you will undoubtably find “opportunities for improvement.” :)
// Sniff pre v.86 versions of Safari
var agt = navigator.userAgent.toLowerCase();
var appVer = navigator.appVersion.toLowerCase();
var is_safari = (agt.indexOf(“safari”) != -1);
var build = appVer.substring(appVer.lastIndexOf(”/”)+1);
if (build < 86) {
[removed](’<style type=“text/css”>li:hover ul { display: none } </style>’);
}
William Ellis
Fixed a couple of problems for you and got it to validate. I got it to work as (I think) you intended in MSIE 6.0, Netscape 7.1, Opera 7.23, Mozilla/Firebird 0.7, K-Meleon 0.8.2. The main to the css changes were:
li {
Clear: left;float: left;
}
ul>li{
clear: none;
float: none;
}
li > ul {
top: auto;}
See: http://whistlingduck.wrellis.com/menu4.html
I am still having issues with my site on Mac browsers. Unfortunately I do not have easy access to a Mac so turnaround is slow. If anyone has any advice I would sure appreciate it.
-William Ellis
William Ellis
URL for aforementioned site is:
http://whistlingduck.wrellis.com/
Sorry about that…
-Will
Steve McGhee
dont forget the doctype:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
i was using Transitional and it wouldn’t work in Mac/IE. once i changed to strict, everything worked great.
Mark
I’m working on a website for school and my teacher refuses to give up frames. He wants a drop-down menu in a typical side-bar fashion. After trying this example, my drop-downs go outside of the frame so they aren’t much good.
I was looking at two solutions, and was wondering if anybody here could help me with either of them.
Solution 1: Code the drop-downs in such a way so that the drop-downs push the lower options out of the way, in the same column. Example(hope this works):
Heading 1
Heading 2
Heading 3
And when mouse hovers on Heading 2, you get:
Heading 1
Heading 2
Option 1
Option 2
Heading 3
You get the idea, right?
Solution 2 (may be easier?): His main objections to tables instead of frames is that it’s easier to maintain one menu file. So, I was wondering if it would be possible to add in a special HREF that would embed the code for the menu into the table, without having to copy it again. I hope you can understand what I mean…
Thanks for the help, and I’m finding this to be a great site for information.
Peter Crisman
Nice tutorial.
Janos – awesome :)