I have a normal css menu, but want ot add drop down menu to it

multichild · #1 (**permalink**) Jan 8th, 2007, 15:23

Hi,

I have a css menu running ok in IE, not so good in Mozilla, which Im working on, but in the end I want it to be a drop down menu of the same style.

Can anybody help me to get this CSS nav working with a drop down menu.

lee

ukgeoff · #2 (**permalink**) Jan 8th, 2007, 15:44

Have a look in the 'sticky' for this css forum.

There is a menu tutorial that you can download which will tell you all you need to know for producing both vertical and horizontal drop-down css driven menus.

Come back when you have worked through it if you have any questions.

multichild · #3 (**permalink**) Jan 9th, 2007, 13:59

Hi there, I followed the sticky, and thanks very much it was very useful.

I have tweeked and played with it to suit my needs and I think it looks very good, but again, and I honestly followed it, I dont seem to be able to get my sub menus to appear.

Could you have a look please.

http://www.checksafetyfirst.com/en/l...ex-leetest.php

cheers

p.s It seems to be ok in mozilla, but for a line running through it, but cant get drop downs to work in IE

karinne · #4 (**permalink**) Jan 9th, 2007, 15:04

You're missing the JS to make it work in IE

Code: Select all

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

More info here:
Suckerfish Dropdowns
Sons of Suckerfish

multichild · #5 (**permalink**) Jan 9th, 2007, 15:15

Hi,

I noticed that a part of that tutorial included me downloading a file called csshover.htc, which I did. And then from what i could follow I placed a stylesheet link on the page, and within that style sheet was below:

body {
behavior: url(csshover.htc);
}

which I presumed targeted the J script within that file.

Is this what you mean?

cheers

Lee

ukgeoff · #6 (**permalink**) Jan 9th, 2007, 15:23

As far as I can see, you have not linked in the csshover.htc file refered to in the tutorial.

There is also an issue with the red background bar that is part of the hover style. It does not always fit the width of the dropdown menu. Sometimes too short and sometimes going outside the menu box.

You really should seperate all your css and JavaScript into their own files and then link them into your pages.

That 'onload' you have for all those images is going to be an absolute killer for anyone not on broadband.

I've also just noticed that you have two <body> tags in your code.

multichild · #7 (**permalink**) Jan 9th, 2007, 15:43

I sorted out the red background bar, i was playing at that time i think.

You right about the onload stuff too, it was the same for this nav, until i went over to css, ive only picked this up of a previous developer yesterday.

As for that j script file, I think i did what they where saying, which was to download it and I did and put it in the same folder, I then created a new css file called ieonly.css and linked that onto that page, and inside that I put:

body {
behavior: url(csshover.htc);
}

I iwll make sure the linking is all correct, but what I have just said is it the right thing they where asking people to do

lee

multichild · #8 (**permalink**) Jan 9th, 2007, 16:07

I got it, thanks a lot Geoff...

I took that body code and put it in the actual css file rather than in another css file, and hey presto.

Thanks again

Lee

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
drop down menu using asp.net and vb	skat	ASP.NET Forum	9	Jan 8th, 2008 19:38
drop-down menu help	davthewav	JavaScript Forum	5	Aug 15th, 2007 11:36
Drop-down Menu	kaz	JavaScript Forum	7	May 23rd, 2007 10:05
css drop down menu IE	Kelly26	Web Page Design	3	Mar 27th, 2006 23:59
Drop Menu Help	xKillswitchx	Web Page Design	1	Jul 13th, 2005 17:56

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
I have a normal css menu, but want ot add drop down menu to it