The Struggle for Semantic Purity
I wasn’t looking for trouble, but as so often happens, I found it. I happened on a reference to a snippet of CSS code at Kalsey Consulting implementing CSS tabs with submenus. I thought, Cool! But then I flushed with shame when I realized that my CSS tabs, which already have submenus, implement the submenu as a separate menu. So my navigation certainly failed the semantic purity test. Since I had already gone to the trouble of making the navigation a simple list (laying it out horizontally using CSS), I thought I should go all the way and move the submenu into the main list where it belonged. That way the navigation would not only make much more sense, but would degrade nicely if the linked style sheet were missing. The only problem was how to lay out the same list both horizontally (main) and vertically (the submenu). The solution turned to be relatively straightforward, although I had to learn even more about inheritance and selectors than I already knew to get it to work correctly.