In a manner somewhat similar to the vertical menu links, we will now apply styling to the link elements to create the graphic look of buttons. We will change the link display to block, remove underlining, add padding and borders, and float the links to the left.

div#topnav a { display: block; float: left; padding: .2em 1em; text-decoration: none; color: #333; background-color: #fc3; border-right: 1px solid #fff; }

The results should look like this:

example at this point

The links are set to display:block. This makes the entire link, which includes the text and padding, to become "hot", or clickable. A user should be able to click on any area of a link "button," with or without text under the mouse pointer.

The float:left property is critical for creating the horizontal menu. We must use the float property so that each link will slide up beside the last one and spread out across the page horizontally. Using the float property is how we overcome the use of display:block which is necessary to make the entire link button clickable.

The padding is set for each link to provide space between the text and the topnav DIV borders as well as space between each adjacent link (button). The padding values can be increased or decreased to graphically make the buttons wider and taller, or compact and slender. Adjust the padding to fit your needs.

The link text-decoration is set to none so that our menu items look like buttons instead of normal text links, even though they are normal links!

The color specifies the color of the link text and the background-color specifies the background color of the buttons. Generally the background color looks best if it matches the background color of the containing DIV but this may not be true in all situations. Adjust the colors to fit your needs.

The border-right declaration creates the dividing line between each button.

Note: You may also alter the A link font attributes. For example, you may want to make the button text bold or choose a separate font-family for the navigation buttons.

Notice that each link (button) is a slightly different width. Currently each button is only as wide as it needs to be to display the link text plus the padding on the left and right sides. For some menus variable-width buttons may be desirable. However, we will also take a look at a way to make equal width menu buttons in just a moment.