Vertical Menu with "Tab-out" Submenus
Want a little more style to your submenu display? Check out this menu that allows the primary menu item to extend out as a header to the submenu displayed as a fly-out. I call it a "tab-out" system and since I haven't seen this done before I am taking the liberty of coining that term!
Important Note:
You Must Repeat the Current Menu Item in the Related Submenu
The menu item that is "tabbed" out (in other words, the menu item that is being given a submenu) will need to be repeated as the first item in the submenu itself. The menu item in its first appearance gets the class of "sub." When this item is repeated as the first item in the new submenu it gets the class "anchor." This menu should, in theory, support an unlimited number of submenu levels with no further CSS work. Be warned, however: Failure to code the submenu anchors properly WILL result in a disjointed menu and poor/possibly unuseable navigability.
Please note that the font size and lineheight in this section:
can still be altered to increase/decrease the size of the font or the lineheight without breaking the menu design.