After reading an excellent article at A List Apart I was inspired to create a similar menu that allowed multiple menu levels and a vertical version.
The really small JavaScript file is only needed for IE the rest of the browsers only require CSS.
My version is not as pretty as the Suckerfish Dropdowns final example, but still pretty cool.
Let me know if it works or not on your browsers, I'm really interested to here from Mac users.
Light Weight Multi Level Drop Down Menu
Light Weight Multi Level Drop Down Menu
Tony, that looks pretty cool.... the "suckerfish" example page link is a Page Not Found(404) Error
BTW have you played around with any XML based menu systems ?
Light Weight Multi Level Drop Down Menu
Hi paCkeTroUTer,
Thanks I fixed up the link.
Can you point out a couple of good XML based menu systems.
Light Weight Multi Level Drop Down Menu
I have come across a problem using your method on IE6. I have a horizontal navigation list that wraps to form two rows of buttons. A dropdown list from the upper row of buttons is hidden under the second row.
It works fine in Moz1.4
I have tried various 'z-index' values to no avail.
Is there a solution to this problem?
Light Weight Multi Level Drop Down Menu
Hi kenrbnsn,
Thanks for pointing it out.
I haven't thought of a solution yet but will be working on it.
Light Weight Multi Level Drop Down Menu
Well after hours of trying many different combinations of CSS rules I have finally cracked it.
When the horizontal menu wraps both levels of menu are available.
I'd still like to here from some Mac users if there are any about.
http://www.csscreator.com/menu/multimenu.php
Light Weight Multi Level Drop Down Menu
That's a really nice menu! On the platforms where it doesn't work, what does happen? It would be great if the navigation fell out anyway, just as the logical nested lists...
Light Weight Multi Level Drop Down Menu
Yes that about what happens although I'm still waiting on someone with a mac to test it out in some browser
The JavaScript is only needed for IE so if any other browser has JavaScript disabled the menu will still work.
If the browser doesn't support CSS at all then it will just see the unordered lists.
If IE has JavaScript disabled it will be stuck with just the top level menu. You could get round this by using JavaScript to write out the css for IE so a plain list would be displayed without css when IE had Javascript disabled.
That's not really a concern for me If you are surfing without JavaScript then you are missing so much anyway a few levels of menu wont be missed
:roll:
Light Weight Multi Level Drop Down Menu
I might (fingers crossed) be able to track down a mac user and give it a try. Not sure what browser he uses, though.
Light Weight Multi Level Drop Down Menu
Hiya, Mac user here, running OS X.2.8. Sorry to bring bad news, especially as it's my first post here
Safari 1.0 (v85.5)
Horizontal menu. Only the first item in the dropdown is displayed
Vertical menu. Seems to work fine
However, the sidebar on the right starts underneath the main section, but at the correct horizontal position.
MozillaFB (0.7.1 milestone)
Horizontal renders correctly, same problem with the sidebar as above. However, when you mouseover any of the items in the vertical menu, the flow of the page is interrupted. The section entitled 'Files' is shifted up to start in the margin next to 'Javascript'
MacIE (5.2)
Totally breaks the layout of the page, and the menus don't drop down at all.
Camino (0.7 milestone)
Works, although there are problems with the vertical menu as detailed with MozFB (and other gecko browsers, i presume?).
If you want some screenshots, send me a PM and i'll send some over to you
Light Weight Multi Level Drop Down Menu
Hi teaboy,
Thanks for the response.
The Vertical menu was fun to create but it's not very usable in anything so I am looking into a redesign for it.
Looks like I have some work on the horizontal one as well.
Thanks again for pointing out the problems.
Light Weight Multi Level Drop Down Menu
any way to make this menu hug the top left corner of the browser window? if you take the #nav id property off the ul it does but of course then it starts screwing with other ul's on the page.
Light Weight Multi Level Drop Down Menu
Hi brad98,
The easiest way would be to position a containing div around the menu.
Something like position: absolute; top:0; left:0; margin-left:-2em;
Hope that helps
This is driving me crazy!
I'm playing with the vertical menu portion of your code..
My version works fine in IE6. In Mozilla, all of the hidden ULs for a particular LI display on hover. In Opera, nothing works. ](*,)
You can see the pages at http://63.247.85.58/~restaura/admin/isok.php?action=update&what=doit
This has been driving me crazy all weekend!
Light Weight Multi Level Drop Down Menu
Hi kenrbnsn,
I don't have Opera installed at work so I'll check it out when I get home.
What versions of Opera is causing problems?
Light Weight Multi Level Drop Down Menu
What versions of Opera is causing problems?
Sorry.
Versions: Mozilla 1.4 and Opera 7.23 (just downloaded today)
Light Weight Multi Level Drop Down Menu
Hi kenrbnsn,
I think the Opera is caused by lack of available LI space for hover.
Try putting some margin on a elements within vertnav.
#vertnav a { margin:0.2em 0 0.2em 0.1em;the order clockwise from the top, top - right - bottom - left. Right margin is left at 0 so to make it easier to hover onto the menu that pops to the right.
Hope that helps
Re-coded the CSS
I decided to go back and re-code the CSS.
I deleted everything dealing with the nav lists and added things back one by one seeing how each affected the display.
I now have everything working on IE6 and Mozilla 1.4
It still doesn't work on Opera 7.23 but I'm not too worried since the person who will be using this page doesn't use Opera.
Light Weight Multi Level Drop Down Menu
When I use this in IE6 and mouseover the top-level menu, it seems to shift everything a bit to the right. I haven't been able to figure out how to fix this, any ideas?
Light Weight Multi Level Drop Down Menu
Oops, sorry to post again so soon. I'm also having trouble in that when I remove the set width of the #nav li rule the submenus suddenly go into what appears to be an inline display. I'd like to not have all of the li the same width, so was hoping to be able to set the width to auto, but that's not working. Any ideas how to fix this, or should I just manually set the width on each li?
Thanks!
Light Weight Multi Level Drop Down Menu
Hi Brendan,
To fix the movement in IE set the position to absolute in #nav ul, which is how I originally had it set. It was changed to relative for when the menu wrapped to another line the bottom level was not accessible.
I don't know of a solution for the width problem if you find anything let us know.
Cant get Opera working
Hey guys, I used a combo of the Suckfish version and the version from this site. I cant get it to work in Opera because the rollovers appear in the upper left corner. Anyone figre that out yet?
You can check it out at www.flchost.com
Thanks
Light Weight Multi Level Drop Down Menu
Hi SuprSpy79,
Try adding position:relative; to #menu ul.
Hope that helps.
Light Weight Multi Level Drop Down Menu
I keep getting a javascript error in IE6 on WinXP. The dropdowns work, but it gives me an "Object required" error that seems to translate to this line:
if (document.all && document.getElementById(nav).currentStyle) {
I don't know why - it's a dead-set copy and paste... anyone else had this trouble???
Light Weight Multi Level Drop Down Menu
Nice work.
Any idea of how to get form elements such as <select> not to show through the menu in IE?
Light Weight Multi Level Drop Down Menu
Hi,
Great menu! I have used this in one of my websites and it works a treat.
I like the minimal use of javascript, too.
I have a question, though.
How do I get the vertical menu to appear to the far left of the screen? On all of my pages it seems to be shifted about 5% (not exact) out from the left and I cannot find what controls this setting.
cheers,
adrian
Light Weight Multi Level Drop Down Menu
Hi guy's,
Mza,
Select boxes and some other form elements don't are handled differently by browsers then most other elements. They don't follow the normal z-index layering structure. I don't know of a way around it apart from moving either the menu or select elements out of the way.
Public,
Have you tried playing around with the left margin on the top level ul.
Hope that helps
Problems with older browsers on the MAC
I am completing a redesign of my major account's site.
Here is the old site: http://www.restaurantserenade.com/
Here is the new site: http://63.247.85.58/~restaura/new/index.php (click on the logo to get to the rest of the site)
I need feedback of the look and feel, how it looks and performs in older browsers, how it looks on platforms other than Windows (MAC, Linux).
The new site uses the techniques discussed in this thread for the left hand menus.
I know the site doesn't perform well on Netscape 4.7 and I had a person contact me who uses a mac G4 with Internet Explorer, 5.1 and said it looked horrible.
The content is still being worked on.
Thanks in advance.
a little multilevel menu problem
Hello,
I just read about the multilevel menu. It's an excellent menu, but I have a little problem with it. Some elements of a submenu hide under some elements of the parent menu. Have you got any idea how to solve this problem ? I tried for hours to set z-indexes but it didn't work.
Thanks
Light Weight Multi Level Drop Down Menu
Hi kenrbnsn,
possibly your friend doesn't like purple
I don't have a mac to test with but I do mention on the page that it fails in IE5.2 on Mac, so I can only assume the menu also fails in IE5.1 on mac.
Light Weight Multi Level Drop Down Menu
Hi horatiu,
Can you post a link to the page so we can have a look.
Also which browsers are causing the problems.
different height of block in top and sub menus
Is it possible to have a different height of block than the topmenu in the submenus?
I couldn't figure out how to achieve this
Thx for your help
Light Weight Multi Level Drop Down Menu
Hi LeFonk,
I'm not sure I understand your question but I'll have a go anyway.
If you give the li a class then you should be able to change the height of a specific list item.
.bigone{height:100px !important; background-color:red !important;} <li class="bigone"><a ...
Mark the style !important if they are having no effect.
Hope that helps
unfortunately, it doesn't work
i'm afraid that in IE it doesn't work...
if you put a bigger size than the top menu, it seems to work (ie. height: 50px;)
but if you put a smaller size, which is what i'm trying to get, like height: 15px, it doesn't.
the #nav a { height:1em;}
is the one that is kept....
if anyone has a solution....
thx
Light Weight Multi Level Drop Down Menu
Hi LeFonk,
Give that LI a class as I mentioned before and set the height and line-height of the "a" within that class
li.small{height:10px;} li.small a{height:10px; line-height:10px;}
Hope that helps
it's getting better....
it seems to work but there's still something i can't understand
could you please have a look here
http://home4funk.mp3.free.fr/dropdown/index.html
my test menu is there
the first submenus height is working with the new class i put, but there's a space between each item of the submenus i can't figure out where it comes from.
just see the source of the page, everything is there (no external css or js file)
Thx
Light Weight Multi Level Drop Down Menu
Hi LeFonk
After
#nav li a { background-image: url(img/fd_nav.gif); line-height: 30px; height: 30px; }
add
#nav li li a { line-height: 20px; height: 20px; }and adjust the values as needed.
Hope that helps
Light Weight Multi Level Drop Down Menu
RockyShark wrote:
I keep getting a javascript error in IE6 on WinXP. The dropdowns work, but it gives me an "Object required" error that seems to translate to this line:
if (document.all && document.getElementById(nav).currentStyle) {
I don't know why - it's a dead-set copy and paste... anyone else had this trouble???
I had same problem.
Comment out the last line. The bottom part of the script seems to pass the var if left without a comment it simple calls once with the "nav" id used and once again with the "vertnav" id used.
Look at this segment of code:
window.onload= function(){
/* pass the function the id of the top level UL */
activateMenu('nav');
activateMenu('vertnav');
}
If using nav menu change to:
window.onload= function(){
/* pass the function the id of the top level UL */
activateMenu('nav');
/* activateMenu('vertnav'); */
}
If using vertnav menu change to:
window.onload= function(){
/* pass the function the id of the top level UL */
/* activateMenu('nav'); */
activateMenu('vertnav');
}
Well I think I am right in the above, it does work for me.
MattyUK
Light Weight Multi Level Drop Down Menu
Hi MattyUK,
Your correct, only one of those lines is needed depending on your choice of menu.
Since my example has two menus I left them both in.
I will have to revise the wording of the example to make it clearer.
Light Weight Multi Level Drop Down Menu
Hi, I'm working on implementing the vertical menu.
I notice that even in the example given at http://www.csscreator.com/menu/multimenu.php
when you hover over the first level menu item, what appears to be a white line appears.
even if I match the background colour to the menu color (to try to hide the line) the menu items on the first level appear to "jump" when you hover over them. Hovering down the menu is slightly less obvious than if you hover up the menu for some reason.
the second level menu is fine though.
How can I get rid of this?
Thanks
Anniii
PS love the menu
Light Weight Multi Level Drop Down Menu
Hi annii,
Sorry for the slow response.
Adding float:left; to #vertnav li, stops the gap in IE6.
I have only tested it in Firefox and IE6.
When I get time I will test it a little more and add it to the demo page.
Hope that helps
Gap and jumps
(I've been waiting for the same reply as annii) -- I tried adding float:left; to #vertnav li and instead of fixing the problem, it caused my first-level menu items to flow across the page instead of lining up vertically on the left.
--memcinto
Light Weight Multi Level Drop Down Menu
Hi memcinto,
Which browsers are you having problems with?
Heres what I have in multimenuvert.css
#vertnav{list-style: none;} #vertnav ul { padding:0; margin:0; list-style: none; width:12em; z-index:99; overflow:visible; position:absolute; background-color:#DFDFDF; } #vertnav li { position: relative; width: 12em; background-color:#DFDFDF; border:solid 1px #CECECE; border-bottom:none; display:block; height:1.5em; /*auto */ margin:0; float:left; /*fixes a gap in IE when hover is over a li with a next level*/ } #vertnav a { text-decoration:none; display:block; padding: 0.1em; margin:0.2em 0 0.2em 0.1em; /*helps Opera with hover */ background-color:#DFDFDF; width:11.5em; /*helps IE with hover */ height:1em; } #vertnav a:hover{ background-color:#0099CC; color:#FFFFFF; } #vertnav ul, #vertnav ul ul, #vertnav ul ul ul{ display:none; position:absolute; top:0; left:12em; } #vertnav li:hover ul ul, #vertnav li:hover ul ul ul{ display:none; } #vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul{ display:block; } li>ul { top: auto; left: auto; }
I just tried it out in Opera 7.2 the vertmenu stoped working so back to the drawing board.
Light Weight Multi Level Drop Down Menu
Ok since the problem only seems to occur in IE we could use the Holly hack from www.positioniseverything.net to target just IE
/* Win IE only \*/ * html #vertnav li{float:left;} /* end holly hack */
Let me know if you still have troubles with it.
http://www.csscreator.com/menu/multimenu.php
Hi, thanks for your prompt response to my messages. I'm still having the same problem with the Holly hack, that is the main menu items flow from left to right across the page instead of lining up vertically on the left:
without the Holly hack: http://eebweb.arizona.edu/testing/vertical2.htm
with the Holly hack: http://eebweb.arizona.edu/testing/vertical.htm
I am using IE version 6.0.2800 SP1. I also have some screen shots in case the behavior doesn't appear for you:
http://eebweb.arizona.edu/testing/screenshots.htm
Thanks!!!
-- Margrit[/img]
Light Weight Multi Level Drop Down Menu
Hi memcinto,
If you resize the window you can get to a point where the li's line up correctly.
So we need to restrict the width of the main container.
Try setting the width of the top ul eg:#vertnav{width:12em;}
Hope that helps
Nest list format
Hi everybody
I'm trying to make a multiple level menu with the wonderful solution proposed here. My problem is that the nested list that I must use (generate by a cms in php) has a very little difference with the one's used here.
He re is my list format :
<ul> <li>About <ul> <li>test</li> </ul> <ul> <li>text2 <ul> <li>First Post</li> <li>test2</li> </ul> </li> </ul> </li> <li>Home</li> </ul>
The problem is that with IE5 or 6, the fist "test" doesn't appear !
That because the <ul> tag is closed and then reopen for the rest of the list... With Firefox all is ok, but with IE...
Is there a solution by changing something in the javascript ? Because I can't achieve to change my nested list format

If someone has a solution, it would be much appreciated...
Tx
Light Weight Multi Level Drop Down Menu
Hi ninjadelanuit,
Currently the menu only targets one UL within a LI.
Try changing
/* assign the function to the LI */
lis[i].onmouseover=function() {
/* display the inner menu */
this.lastChild.style.display="block";
}
lis[i].onmouseout=function() {
this.lastChild.style.display="none";
}
To
/* assign the function to the LI */ lis[i].onmouseover=function() { /* display the inner menu */ var uls= this.getElementsByTagName("UL"); for(Var s=0; s< uls.length; s++){ uls[s].style.display="block"; } } lis[i].onmouseout=function() { var uls= this.getElementsByTagName("UL"); for(Var s=0; s< uls.length; s++){ uls[s].style.display="none"; } }
I haven't tested this out.
Hope it works.
lining up the list
Trying to implement this solution for a vertical menu.. when I mouse over the various links that activate the submenus, i get a 'flicker' in IE.. the various solutions proposed to solve this generally seem to be be based on using images for backgrounds, which I am not doing.. any Idea why my code in particular might be 'flickering'? when I view the demo it works great using the same browser.. any suggestions would be appreciated.
Re: lining up the list
Trying to implement this solution for a vertical menu.. when I mouse over the various links that activate the submenus, i get a 'flicker' in IE.. the various solutions proposed to solve this generally seem to be be based on using images for backgrounds, which I am not doing.. any Idea why my code in particular might be 'flickering'? when I view the demo it works great using the same browser.. any suggestions would be appreciated.
well, no sooner than I posted it did I figure it out.. I was running overlib as well which apparently has a 'clear' function that was making the div disappear..
Light Weight Multi Level Drop Down Menu
Hi jhodges,
Glad you found the solution.