Can you refer me to a tutorial for making CSS-based dropdown menus similar to what’s found on this site?
First of all, I must admit I am not a big fan of dropdown menus. They can be a usability nightmare when not done right, and all too often they mask a poorly developed site architecture.
That said, if you feel the need to incorporate them for your site (or a client insists you do it on their site), there is a right and a wrong way to it.
Make sure the solution you choose uses well-structure HTML markup and lightweight CSS/JavaScript. Secondly, judge the size of your navigation to make sure a dropdown makes sense. If you have 5—7 links, you probably don’t need it. If you have 5—7 site sections that all have 5 or more subsections then it might make sense to incorporate a dropdown menu. Lastly, plan for what will happen if your visitors don’t have JavaScript enabled. Does the menu work with CSS only? Does it work without styles at all?
Probably the best implementation out there is Son of Suckerfish Dropdowns. It’s accessible, lightweight, and works well across modern browsers. It does use a small bit of JavaScript, but that is a necessary evil in order to support older versions of IE/Windows. I’ve used a version of Suckerfish called Superfish as a jQuery plugin with great success (check it out live on the new Summit Hut site).
The cthsu.com site uses a product called “CSS Express Drop-Down Menus” from ProjectSeven. It’s another good implementation aimed specially at single-level CSS dropdown menus.
I hope that helps you. For more on dropdowns and how they affect website user interfaces, read these articles:
The Sensible Leader 