Horizontal menus require a little more effort than vertical menus to style, but for the most part use the same techniques. You’ll want to start off with an ordered or unordered list. Using CSS, strip the default list styling and all the margins and padding associated with both the list element and all list items. This is often taken care of by a CSS reset, but can be done individually for menus as well. Next, you’ll want to either float the list items or change their display property to inline in order to get them to display horizontally. Which technique you use is largely a matter of personal preference, but floating the list items allows them to retain their box model properties, which can be extremely useful for specific styling needs.
Once the menu items are horizontal, it’s really just a matter of styling preferences that will determine the menu’s look and feel. You can apply backgrounds and dimensions to the parent list element, or confine the styling to the actual links themselves. Defining a set height for the parent list item, and then setting the line-height of the links to the same value allows you to vertically center link text within the horizontal menu. Using the parent link element for backgrounds gives you a little more flexibility when styling rollovers or more complex menus as well, which makes it a widely used method of styling horizontal menus.