CSS Design: Horizontal Menu

HTML unordered list (UL) is the best way to create a professional horizontal CSS menu. Here is an example:


So here you are:

• First
• Second
• Next

Horizontal CSS menu example

Unordered list composes my menu with three elements: First, Second, Next. The 'horizontal-menu' class makes it horizontal (display: inline). Using the 'border' property gives the 'pipe look' style. Pay attention that the last-child attribute removes the pipe sign at the end of the menu. Div with the 'float: right' style puts the menu on the same line with the H4 header and aligns it to the right. Div with the clear:both style breaks the sequence of inline Div tags arranged in a single row. So the next HTML element will be placed without any floating. In my case it is just a doted line (.doted_line class) that divide menu and other part of a page.