In this step we will transform the list from vertical to horizontal.
By default, list items are block-level elements and flow vertically down the page. We will re-define the display of the list items to
display:inline. This will make them flow in a
horizontal fashion, one after another on the same line.
In future steps we will put space between the list items so they are more attractive.
- Add the following LI rule to your style sheet:
div#topnav li { display: inline; }
Your list should now look similar to this:
At this point you may be asking yourself why we are bothering with all this styling of a list when we could simply type a horizontal line of text inside a DIV and style the links into buttons. Certainly you could take this approach and that method does work for very simple menus. But when you use a list to create a horizontal menu there are some distinct advantages:
- A menu built on a list and styled with CSS degrades gracefully in older browsers.
- A menu built on a list presents its content in an appropriate manner on all types of user agents, simply because a menu IS a list.
- A horizontal menu built on a list and styled with CSS can be restyled into a vertical menu, or vice versa, by changing only the style sheet.
- A menu built on a list and styled with CSS offers many options for creative styling simply because there are more elements to work with. (Consider DIV, UL, LI, A and then think about colors, borders, background colors/images and a multitude of contextual selector options.)
- A menu built on a list and styled with CSS can incorporate nested lists to create multiple levels of cascading submenus.
Returning now to our quest for an attractive horizontal list-based menu, we will proceed with styling the navigation links.