One Way to Make a List-Based Horizontal Menu
- Make an unordered list with links in each list item.
- Give the UL (contextually) a list-style-type of none
- Zero the UL’s margin-left and padding-left
- Give the LIs a width (typically in percentage)
- Float the LIs
- 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.