Light Weight Multi Level Drop Down Menu

Hi wagnerthomas1,
Try #nav{padding:0;}

Something else I noticed was that you have are trying to activate two menus, you should remove

Hope that helps

Hello,

I'm having a conflict between the solution referenced below and my desire to have tags change color dynamically as I roll over them. When I add the desired version of the code below to my css, and have the following

#nav li:hover a{color:#999999;}
#nav li:hover li a{color:white;}
#nav a:hover{
background-color:#000000;
color:#ff9933;
background-image:none;
}

, the orange roll-overs that appear when I currently scroll over the a links, are not visible (atleast in safari and firefox). I am looking for a solution where I can keep the orange roll overs and at the same time get the top level li tag to change color (not background-color) to gray.

Thoughts?
-Kasia

re:
Hi KasiaOz,
With a bit of work you should be able to get it working in most browsers
Code:
#nav li:hover a{background-color:green;}
#nav li:hover li a{background-color:black;}

It's not so easy to do it for IE Shocked

Hope that helps

Hi

I've put the menu in a test page at:

http://home.vicnet.net.au/~persia/test/real21.html

The menu seems to be dragging a div down in mozilla & firefox, but not in IE. Any idea what's causing this?

Also, the submenus are slightly over/underlapping, again I can't see why.

Thanks

Persia

Seem to have fixed this by setting the #nav margin-top to -17px and adding a nbsp; in the div that contains the menu. Is that an unacceptable hack?

Thanks Tony, i didn't knew, that a normal ul-padding is about 40 px. It's working now ...

Speaking of lists (if I shall open another topic, please tell me),

I've already searched for an answer in other topics but didn't find one. I'm trying to usw my own images as bullets in a list (as described in alistapart.com) and it just doesn't work. In mozilla it makes another line, in IE it doesn't even show the elements. I'm really desperate ... it just makes no sense, or does it!?

http://matowa.com/htl/menutest/test.htm

Thanks a lot, again.

Hi wagnerthomas1,
With lists you will find it easier to position the image as a background-image.
You then use padding to move the text off the image.

Hope that helps

Thanks once again.

I don't understand why all the browsers generate different sizes when i use padding and borders in my css. I mean, it looks different in every browser and i don't find a way to create a #-div with <a> in it which look the same in opera and ie.

What is the reason this (http://www.alistapart.com/d/horizdropdowns/horizontal.htm) looks the same in opera and ie and this (http://www.matowa.com/htl/menutest/test.htm doesn't.

The height is different in every brower. Why that? Is there a way to get them to have the same height? Or is it completely wrong what I'm doing?

I don't know if I'm writing my problem in an understandable way (again -> Austria ), but I seem to be extremly dumb.

Hi wagnerthomas1,
It could be a number of things or a combination of them.
- Line-height, try explicitly setting the line-height.
- Quirks mode, your page is in quirks mode where the other is in standards mode.
- Box model.

Hope that helps

Ok I've re-read all the comments attached to this thread and I don't think this has been asked but forgive me if I have missed it.

However my question concerns the accessability of these menus. Whilst it is indeed fine code is it really usable for things like screen readers if used as the only means of navigating a site?

What I mean is as far as I can tell the only way to get the dropdowns to apprear is with the use of my mouse and the hover psudo class, using the keyboard does not seem to work, which is to be expected. As a result I would not be able to get to sub sections in the absence of additional static subsection navigation.

What are your thoughts on such things?

Hi Briski,
The idea behind these menus was to create a simple menu without the need for javascript or another scripting language.
Really it succeeded, the javascript is only needed for IE and is minimal.

To add keyboard browsing or screen reader support you would need to have all browsers relying on JavaScript and the JavaScript would be far more complicated.

You should really design sites that can be navigated without a dropdown menu and think of it as a bonus for those that can use it.

Hope that helps

Yes that confirm what I thought already, Great

All I need to do now is make our sales team and customers understand that dropdown only is not a nice way to go ](*,)

I have a Drop Down Menu that I created that works perfect in Mozilla, but in IE it goes behind the lower division. How do I correct this?

http://www.fashionace.com/jbwork/menu.html

Thanks,
Jason Bullock

Hi JJDude,
Looks like you need to adjust z-index.
http://www.csscreator.com/attributes/properties/z-index

On closer look you have already and it seems to be working.

Hey Tony,

Thanks for the information. I have another question maybe you could answer and/or point me to a site that can help.

I am trying to create a lineup of products to be displayed on these pages. I want the container division with the black border/red background. But I want to put divisions for the Product Image and another directly to the right for the Product Description nested inside this container division. How would I go about that? I've tried using Position, Float, and all that stuff but to no avail.

Thanks in advance,
Jason

Hi,
need help plz. I tried out your menu and it´s great. Works nice at any browser, but i got a problem with IE. If i set up

text-align:center; 

(for li, ul), IE browser centers tables, not text. so it looks terrible and doesn´t work. In Firefox, Opera, Mozilla, everything is cool. I tried to center that using <center> tag, but that is not xHTML 4.0 valid:(
Thanks a lot Ondrej (sorry for my english)
:roll:

Finally i solved the problem by writing text-align:center tag into:

#nav a {
    text-decoration:none; 
    display:block;
    padding: 0.1em;  
    margin:0.2em 0 0.2em 0.1em; 
    background-color:#dfdfdf;
    width:10.5em; 
    height:1em;
	text-align:center;
}

But why in there? Don´t understand... But IE does Finally.Thanx anyway

Hi,
got a problem with an absolute positioning of my css horizontal menu.
with this

It works nice at any resolution, but only using IE. In firefox, menu is longer and is not correctly positioned. So, what should i do. Thanks

Great solution. I used this primarily to overcome a problem I had with the content of a JS driven menu still displaying (and being printed) even when it's container block was hidden by a media=print css switch.

But this is quick, easy to edit, and SEO friendly too - bargain!

The only drawback I can see is the inability to incorporate a delay on mouseoff - I have read through this thread and it seems the concensus is that a fully JS driven menu would be required if a delay is really important.

Does anyone have thoughts on a good one? I have tried AllWebMenus, but it has all the drawbacks listed above.

Is there really no feasible way of adding a delay here, even if it meant a bit of a hit on speed etc.?

My gratitude to all those involved in developing this.

Is it possible to modify this menu to get the first two levels displayed horizontally and the third one as drop down ?


>menu1 | menu2 | menu3 | menu4
sub1.1 | sub1.2 | sub 1.3 | sub 1.4
drop 1.1.1|
drop 1.1.2|
drop 1.1.3|
____________________________________
menu1 | >menu2 | menu3 | menu4
sub2.1 | sub2.2 | sub 2.3 | sub 2.4
drop 2.1.1|
drop 2.1.2|
drop 2.1.3|

I hope you know what i mean

btw. sorry for my horrible English

Hey I'm having a problem with the vertical list in mozilla/firefox and safari. I use the list on the left side of my site and on the right side there is the rest of the content. I have set "overflow: auto" for the right side content so that it will show scroll bars when neccessary. But the menu's dont show up over the area with overflow.

You can see the site at http://down.qc.edu/qcsports

The site works great in IE6

Whats about the comment mismatch on the end of your stylesheet ?

/* Win IE only \*/ 
* html #nav li{float:left;}  
/* end holly hack */ 
* html ul li a { height: 1%; }

Hi blacki,
The comment is started with /* in the top line, then IE5 Mac ignores the topline closing comment because of the backslash \*/.
All other browsers close the top comment and read the next line.
But because the * html at the beginning of the line, it is only read by IE.
Then the next line of comment closes the top comment for IE 5 Mac and just acts as a new comment for other browsers.

So the whole section is thought of as a comment in IE5 Mac, everything else reads it fine but only IE win will act on it.

Hope that helps

thanks but that was not my prob, i'm still searching for my hint to make the menu in first and second level horizontal an in the third one as drop down.

That second line is only there because i found that it fixes the IE problem where you have to hover over the actual text for it to recognize the mouse over.

So.. any idea how to fix the problem with mozilla/firefox?

I added the following line to #vertnav ul
border: 1px solid #036;

See it in action at http://dev.bryanzera.net/left_nav/test.html

But the root UL won't take a border. What gives?

Hi

I was wondering whether anyone had tried, or had any thoughts on, a bit of javascript called from each <li> to provide a slight delay on mouseoff, to make the menu a little more friendly?

I love the menu because it's SE friendly, edit friendly, and can be CSS hidden reliably for printing, my only dislike is that if you fall of the edge you lose it, with a half second or so of delay it would be perfect.

Why won't the vertnav take effect in IE? The CSS and HTML are well formed and without error, but the vertical menu is acting like a horizontal menu in IE.

http://www.fresnobeehive.com/new.html

Also, I figured out why the root UL isn't taking a border. Because #vertnav ul means 'associate these attributes to any unordered list UNDER an object with class vertnav'. So if I add ul.vertnav{...} to the css, I get the ugly, too large border.

i need help with this and i started a thread with all the details here

thanks :]

Blacki did you ever figure this out? I'm trying to do the same thing minus the third set of menus (the drop downs). I was thinking it should be as simple as adding a 'display: inline;' but I'm not sure where.

Update: Managed to find a few at Dynamic Drive, though not purely CSS/Javascript nor are they exactly what we are looking for:
http://www.dynamicdrive.com/dynamicindex1/tabmouseover.htm
http://www.dynamicdrive.com/dynamicindex1/jimmenu/example3.htm

lis[i].onmousemove=function() {

anyhow if this gives anybody else fits as it did me, then there's the answer!

Dude, you just saved my life! Everything was working great until I loaded on the main page and the flickerfest began. I had to register just to thank you for the post.

I just reread through all the posts, and it looked like people came up with ways to get various width menus to work for the vertical menus.

I'm trying to implement a horizontal menu that has various widths for the submenus. But I keep running into various problems. The furthest I've gotten so far is that it'll work in IE, but it won't work in FireFox, it'll lose the drop down format of the submenu. Instead of going down, it'll go across and overlay on top of each other.

Any ideas? Please see attached image.

#holdm{
	position: absolute;
	border: none;
	margin: 0px;
	top: 150px;
	left: 10px;
	z-index: 100;
	height: 20px;
	width: 740px;
	background: url(../../images/menu/menu_background.gif) repeat-x;
}

#nav{list-style: none;}

#nav ul {
	padding: 0;
	margin:0;
	list-style: none;
	width:100px;
	z-index:99;
	position:relative;
	overflow:visible;
   }

#nav li.toplevel{margin-top:-11px; width:100px;}

 /* Win IE only \*/
* html #nav li.toplevel{margin-top:0px; width: 100px;} 
/* end holly hack */
	
#nav li {
	position: relative;
	float: right;
	width: 100px;
	background-color: #DFDFDF;
	display: block;
	height: auto;
}
 
#nav a {
	display:block;
	padding:0px;  
	margin:0px;
	width: 100px;
	background-color:#DFDFDF;
	text-decoration: none;
}

#nav a:hover{
	color: #FFFFFF;
}

#nav li ul {
	position: absolute;
	margin: 0px;
	padding: 5px;
	width: 200px;
}

#nav li li a {
	display: block;
	font-weight: normal;
	text-align: center;
	color: #333333;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	margin: 0px;
	padding: 5px;
	background-color: #DFDFDF;
	width: 200px;
}

#nav li li a:hover {
	display: block;
	background-color: #333333;
}

#nav ul{
    display:none;   
}

/*all see this */
#nav ul ul, #nav ul ul ul{
    display:none; 
    position:absolute; 
    margin-top:-36px; 
    margin-left:-100px;
}

/* non-IE browsers see this */
 #nav ul li>ul, #nav ul ul li>ul{
    margin-top:-1.4em; 
 }

#nav li:hover ul ul, #nav li:hover ul ul ul{
    display:none; 
}

#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul{
    display:block;
}

li>ul { 
	top: auto;
	left: auto;
}

Ugh n/m.

I added another class

#nav li li {
float: none;
}

And that solved it, though it added some spaces here and there, and I had to redo the values for my margins. Regardless... my code is getting a little sloppy.

Thank you finally a menu hover that works in mac ie 5.2

Why do you say it doesn't? Is it my css is different? I don't use floats.

I want to use this menu inside of a table cell and have it drop over another cell, Is it possible? If i just include it in the cell it will just make the cell larger and not go over top...for obvious reasons. I dont know how i can make it go over another cell. I tried to put it inside of a div and give it an absolute value but it doesnt appear on the same place in IE as it does in Firefox. Anyone have any ideas for me?

Thanks in advance

Hi maz,
I don't have a mac to test on and initially had reports that the menu didn't work in IE% Mac. It may do now as it has evolved slightly over time, unfortunately I don't have the time or motivation to do any more with it at the moment.

Hi sw,
You would need to position the menu absolutely then it will sit above and ignore the table.

Hi dcdomain,
Keep up the good work.

Hello,

I don´t know if someone else has commented about it before, but I had to add a new line at the end of the menu.css (the vertical one).

/* end holly hack */

Without this line, explorer was aligning all the menu itens at left, listing them. With "clear:both;" it listed the menu correctly.

: )

If it´s necessary, I can post a screenshot.

cheers!

I seem to have a problem implementing the Horizontal Menu (http://www.csscreator.com/menu/multimenu.php) in IE6.
In the 4 catagories shown on my page only the last one to the right (menu4)works in IE6. They all work in Opera, Netscape, Firefox and Konqueror.
The source: [/url]http://dszady.com/windex.html
The jscript: [/url]http://dszady.com/menu.js
The container etc: [/url]http://dszady.com/index.css
The menu CSS: [/url]http://dszady.com/menu.css

I changed the width on this line to accomadate Opera 80% to 100%
#holdm{position:absolute; top:105px; left:-40px; z-index:100; width:100%;}

Clearing up my previous post: I have 4 catagories on the horizontal menu on this page below and menu4 to the extreme right is the only one that works in IE6 XP sp2:

The XHTML and CSS validates
http://dszady.com/windex.html

and this is my jscript file:
http://dszady.com/menu.js

Sorry if things weren't a little clearer before.

Daszady, What you have seems pretty close to the sucker fish example

I took your ul#nav content and dropped it into the ul#nav on my copy of the suckerfish page. I increased the width on a couple of elements and the whole menu works fine in IE - see here. It may be easiest for you to do something similar and then restyle the rest of your page as you like.

Aw! Thank you! Something I can work with. I hate holding up a whole site over something that is important, not entirely necessary, but a person want's very much.
Thank you again,
Daryl A. Szady

Hi daszady,
In your JavaScript file you seem to have to window.onload calls.

Remove one of them so you only have one call to activateMenu

window.onload= function(){ 
    activateMenu('nav'); //you only need one of these for each menu 
}

Hope that helps

Still doing it. Menu #4 only. The only time it really works is having one column.

Well. After driving myself crazy Tony. The problem is IE 6.0.2900.2180.xpsp...
Update version: SP2.
It won't even open the examples on the horizontal or vertical menus on the prototype page. I can't believe that no one else has had this problem (yet).
The examples work on firefox1.0, Opera 7.54 and Netscape 7.2(Linux)
The Suckerfish pages work. There has to be a jscript workaround for this IE demon.

Hi daszady,
I have fixed the problem locally, it was to do with having too many window.onload scripts and the order of the files.
The example probably stopped working when I added the User Preference Script to the site not so long ago.
Unfortunately I am working on a style generator for the menu that is about 80% done so I will upload the fix once that is completed.
Should be in the next couple of days if all goes well.
Until then IE users will not see the example menu working

It works fine in Moz1.4

I have tried various 'z-index' values to no avail.

Is there a solution to this problem?
I was able to use this line in Oprah.
#holdm{position:absolute; top:115px; left:-40px;z-index:100; width:105%;}
Notice the width. I haven't any idea what would happen if you use 100% of screen space.

I have 5 dropdowns on the horizontal menu that work just fine in every browser I have except won't drop down from the 1st from the left in..... IE6 XP SP2. So I'm using the one to the far left for the Home page, par convention. I just find it annoying. IE that is. I'll figure it out.
IE7.... <sigh>
Appreciate your work and efforts Tony. This is the most informative and comprehesive site I use.

Hey guys. I'm having a problem with the horizontal nav-menu. I have the vertical version working perfectly. I'm glad I found the tut. But when I try and implement the horizontal part, it doesn't work. Some help is needed.

Here's the basics of it. The full code can be seen in action here:
Winfield V.F.D. Website
Looking at my code, you can see that I want a sub-menu under "Main --> Carnival". But it doesn't show up in IE or Firefox.

JavaScript Source
CSS Code
HTML Navigation Code

Any help would be appreciated.

~Brett

Firefox with horizontal menus.

All works fine except text is truncated instead of wrapping.

Any fix for this?

Hi,

I had the same problem with wagnerthomas1 and yes, 'padding:0;' fixed the problem promptly however it didn't fix the padding in IE.

Do you have any ideas how to fix this?

Thanks so much and the menu is just awesome.
yun.

Hi bpat1434,
The next level of menu is getting hidden under the rest of the previous level.
Try removing the li's after the Carnival section to see what I mean.

Hope that helps