A List Apart: Articles: Suckerfish Dropdowns

A List Apart: Articles: Suckerfish Dropdowns

last week, i posted a video on how to make a drop down only in css... (and html) we'll do that in class today and more... here's an older article on how to do so... from a list apart.

Meet the markup

To start, we should use the best method for defining a navigation menu — a list. For this example, we will work on a simple HTML unordered list. {Line wraps are marked ». –Ed.}

Sunfishes     
Blackbanded»         sunfish
Shadow bass
Ozark bass
White crappie

Grunts     
Smallmouth grunt         
Burrito
Pigfish

Remoras     
Whalesucker
Marlinsucker
Ceylonese remora
Spearfish remora
Slender suckerfish

Quite straightforward really — nice and neat HTML that, as a result, is highly accessible. But now we want to transform this into a dynamic list — the first level of list items will make up a horizontal menu bar from which the second level lists will drop down.