Creating vertical menus

Vertical menus are relatively easy to create, as lists tend to display vertically by default. Typically, you’ll want to start by stripping the default link styling and then defining the dimensions of the clickable area. This can be a little trickier than you think in some browsers. Because anchor elements are inline elements, some older browsers would limit the clickable area to the link content only, ignoring any additional box-model properties placed on the link. A good way to ensure that the clickable area is the desired dimension is to apply a display property of block to your menu links.

Next you’ll want to control vertical spacing between link elements, vertically center the content of links within the height of the links, and then add stylistic choices such as background colors, borders, or rollover effects.

Vertical menu example