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.



2 thoughts on “List Based Menus

  1. Pingback: Publishing: Electronic Communications « wrmf.ca

  2. Pingback: Layout Recipe: TubeWorld (Dreamweaver) « wrmf.ca

Comments are closed.