Dropdown Menu not workig in IE 1

[Jiggerman]

Hello Folks,

I was hoping one of you fine omnipitant beings could help me solve a problem with a dropdown menu I'm trying to create.

I created the menu for a mate's website using a tutorial I found. With a bit of jiggery pokery this menu works perfect in Fire Fox (no surprises, 5*'s to them), but straight refuses in IE.

I had a serach round to look for a fix, and though I had found the holy grail in a snippet of Java script. But this hasn't worked either.

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("cssmenu");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

The page is up at

http://www.sus-uk.com/MenuTemplate1/MenuTemplate.htm

and the CSS file

http://www.sus-uk.com/MenuTemplate1/MenuTemplate.css

I pretty sure that I've named everything correctly (well it works in Firefox), I just asume that I've applied the fix wrong.

Any help on this will be massively appreciated, this is my first dive into CSS, and I feel like I've started on the top board at the pool!

Thanks again.
Jiggy

 

[BillyRayPreachersSon]

The menu works by using the hover pseudo-class on the LI element. Unfortunately, IE does not yet support this behaviour, so the menu will need reworking in structure to be able to work on IE.

There are plenty of cross-browser menus out there. A good starting place is

http://www.dynamicdrive.com

Hope this helps,
Dan


The answers you get are only as good as the information you give!

 

[Vragabond]

What your script does it adds a javascript onmouseover and onmouseout events to all the <li> elements on the page and makes them add the class over. That means that you need to define class over as well for it to work in IE. I think something along the lines of:

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul,
div#menu li.over
{display: block;}

Meaning, add the over class to any instance of css that displays the menu using :hover pseudo class in FF.

 

[Jiggerman]

Hey Billy,

Cheers for the link. typical Micro$oft peice of poo if I see Bill Gates I'm going to kick him "square in the NUTS!" I was wanting to create the menu from CSS, for the learning experience. I'm also happy with the asthetics of the menu, and was kinda hoping to kepp it.

I had a try at the dynamic drive's dropdown menu system, but I was really looking for something closer to CSS.

But thanks for the pointer.

Vragabond,

Thanks very much for your help, but it didn't fix the problem, (it didn't break it either which is progress for me). I think that I've covered everything, but this is my first CSS project, so I'm probably missing something really obvious.

Can you (or anyone else) spot the mistake that I am making, it really would be great to get this working.

thanks once more for any and all help.
Jiggy

 

[Foamcow]

Can you show us the CSS.

It looks like you are using the Suckerfish dropdowns. You DO need to add an .over class to the CSS.

However I have also had problems in the past with the Javascript, normally down to unbalanced brackets.

The CSS for a development page that I'm using this technique looks like this...

ul {
	margin:0;
	padding:0;
	list-style:none;
}

	ul li {
		margin-bottom: 10px;
		line-height: 12px;
	}

	ul li ul {
		position: relative;
		list-style: disc;
		margin-left: 10px;
		padding-top: 3px;
		padding-left: 5px;
		padding-right: 10px;
		display: none;
		font-size: 90%;
		line-height: 90%;
	  }

	  ul li ul li {
		margin-bottom: 0px;
		padding-bottom: 4px;
	  }

	li:hover ul, li.over ul{ 
                display: block; 
         }

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[taylorantone]

Here's how I've got in on one of my sites that has two drop-downs (one is a pull out actually) on the same page:
This is the code from my .js file

startList = function(nav) {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById(nav);
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}

This is the onload function that calls the script for each of my menus

window.onload = function(e) {
  /* pass the function the id of the top level UL */
  startList('mainmenu');
  startList('navbar');
}

This is the html that ID's the two UL's that use the script

<ul id="mainmenu">

AND

<ul id="navbar">

 

[Jiggerman]

Hayeyy Kind of!

My lack of over classes in the CSS was the problem, so the Menu comes up in IE now, the sad thing is that it's showing ALL the Menu's in FF and IE, so It's working equally badly in both browsers, is that Technically progress? One step forward and a taxi journey back again!

Any more help on this would be greatly appreciated, I've obviously broken it while repairig it.

Many Thanks to all concerned.

Jiggy

 

[Vragabond]

Here's a silly thought. If you look at suckerfish dropdowns (Alistapart, HTMLDog) they are actually incorporating the same technique, but in their case it works. Why not simply grabbing that code and visually adapt it to your menu?

 

[Jiggerman]

Stealing??? Ahh, you mean Borrowing!

Well I had thought about that, but I don't think that it would Directly work, I've got an extra tear of Menu's to add on.

But you are right, I took sorry Borrowed the code and then tried to adapt it to work with an Extra Menu Level.

I'll start again, see if I can get it to run if I re-re-re-reimplement the code (it's amazing how often that works)!

Thanks again for your help

 

[Vragabond]

This one has three levels and works nicely in Mozilla, IE6 and Opera 7. I think that should be enough for you:

http://www.htmldog.com/articles/suckerfish/dropdowns/example/

 

[Jiggerman]

Thanks very much Bond, VragaBond!

That was just what I was looking for, I can get on to replacing all the hair that I had previously pulled out.

Thanks again to everyone who has helped, Kudo's to all of you!

Frae
One Happy Jiggedy Jig!