Skeleton dropdown

8th November 2007

Next Demonstration

Previous Demonstration

Information

Using my latest techniques, this is about as simple as I can make it whilst still getting it to work across as many browsers as possible.

The menu is just a set of unordered lists with a single top level id, and not a single class used.

The html

The stylesheet could have been as small as 12 lines if it were not for IE5.x and IE6.

The stylesheet

Hovering over the top level links will cause the first sub menu items to drop down. This also includes my newly found method of allowing the sub menus to find their own width based on the link lengths and has the flyout levels offset to give a small overlap on the list item from which they flyout. IE5.x and IE6 however will not play ball with this method and have slightly different styling so that the flyouts are next to the end of the previous levels text.

This uses my stuHover.js script to write the IE5.x and IE6 stylesheet extras for us and the li.iehover class as necessary. AgainI have hidden this script from IE7, as it will work without it, using conditional comments around the javascript loader in the page head. IE7 will function correctly using this script but it is a little slower to respond.

The javascript

Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Safari (iPod Touch). Mozilla and Netscape in Firefox mode have a small problem with this one, as does the latest alpha release of Opera.

Because IE5.x and IE6 do not recognise the child selector '>' I have added the extra styling necessary for these two browsers to show the path followed though the menu.

Download

All the files except the photograph 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 skeleton.zip