Dropdown Menu Functionality Demo
With the "dropdown.css" file turned on, the links in the #navigation column become dropdown-based. Top level list items appear in the column and take up all the horizontal room. Sub-list items appear only when the parent item is hovered over. A small arrow points to the newly visible sub-menu. That sub-list may have its own sub items. This continues for a maximum of four levels.
The following is a basic description of the way this implementation of dropdowns work and their practical use. The first part of the dropdown stylesheet is a set of styles designed to undo the previous styles from the styles.css file that would interfere with the dropdowns.
The way that dropdowns work, at the core, involves hiding all of the absolutely positioned sub-menus with a left position of -999em, pushing them way off the screen to the left. When the user hovers over the menu item, the sub-menu pops back to an "auto" left position, making them show up where they should, right beside the parent menu item.
At the end of the dropdown stylesheet are a couple of styles for dealing with content in the #navigation div that aren't part of the dropdown, in this case the Navigation Header and the few paragraphs below. This class, "navigationInnerPadding", gives additional padding to the non-menu items, since #navigation div level padding must be turned off for the correct functioning of the dropdown menu. When "dropdown.css" is off, this class does nothing, and doesn't effect the way that the #navigation content is styled. It's a good idea to use this class in your code even if you don't intend to use dropdowns, because if you ever change your mind, you won't have to add that class later.
If a menu item (<li>) does not have any sub-menu, or if a whole sub-menu (<ul>) has no items that have sub-menus, use the "noArrow" class to prevent the arrow graphic from appearing for that/those items.
Internet Explorer 6 does not support the hover pseudo class on any element except hyperlinks. Because of that, a small Javascript file named "hover.js" is necessary to make dropdowns work. Unfortunately, because the Javascript must refer to an individual id, rather than classes, IE6 limits your #navigation divs to one, and only one, dropdown menu, which should be fine for most situations. If must have more than one dropdown menu, you'll need a duplicate of the original Javascript file for each menu you have. Within the Javascript file, the id must match the id of the unordered list containing the dropdown list, regardless of how many you have. In Perfect Layout, the id of the menu unordered list is "navigationUL".
Read Patrick Griffiths' "Son of Suckerfish Dropdowns" to find out more about this technique and how it works.