List Based Menus

One Way to Make a List-Based Horizontal Menu

1. Make an unordered list with links in each list item.
2. Give the UL (contextually) a list-style-type of none
3. Zero the UL’s margin-left and padding-left
4. Give the LIs a width (typically in percentage)
5. Float the LIs

Possible Options

• Set the line-height of the A tag to control the height of the link box
• Give LIs a border and a margin value to separate them
• Set the A value to display: block to get the link to take the entire width of the LI
• Change the background-color on a: hover
• Make a class style to signify a self-referential link
• Make a class style with “clear:both” to apply to a subsequent element if it’s coming up beside the floated elements.