stu nicholls logo stu nicholls

exploring the possibilities

Professional dropdown #1

4th November 2007

Information

You've seen the 'suckerfish' menus and the 'son of suckerfish', well I think that this one takes them another step further (grandson of suckerfish?).

The 'problem' that I found with using the 'suckefish method' is that you need to style for IE5.x and IE6 as well as for IE7 and non-IE browsers by using li:hover; AND li.sfhover; and this is a bit tedious and not quite correct to have styles for a 'non-existent' class. So I thought that whilst we were rewriting the source code to add 'hover' classes to the <li> elements we might as well use javascript to add the IE5.x and IE6 styling for us. So that is what this demonstration does.

If you examine the stylesheet for the above menu you will only see the li:hover styling. A very small javascript routine is used to search out each occurance of li:hover and create a new selector with li.iehover instead and finally uses the 'suckerfish' approach to rewrite the source code on mouseover and mouseout using li.iehover.

So now all we need to do is produce our unordered list and style it for Firefox, Opera, IE7, Safari etc. then let the javascript take care of IE6. The only difference is that IE6 doesn't understand the child selector '>' so will not show the path followed through the menu structure.

The javascript

Tested in IE5.5, IE6, IE7, Firefox, Opera, Netscape, Mozilla, Safari (PC) and Safari (iPod Touch).

Download

All the files, except the photograph which is copyrighted, can be downloaded using the link below. If you are going to use this in your website then please respect my copyright and keep the credits in the stylesheets and javascript.

Download pro_dropdown_1.zip