CSS Design: Horizontal Menu

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

	<div style="float: right;">
	<ul class="horizontal-menu">
	<li><a href="javascript:window.alert('First')">First</a></li>
	<li><a href="javascript:window.alert('Second')">Second</a></li>
	<li><a href="javascript:window.alert('Next')">Next</a></li>
	</ul>
	</div>
	<h4>Horizontal CSS menu example</h4>
	<div style="clear:both;"></div>
	<div class="doted_line">
	</div>

view raw css-horizontal-menu.html hosted with ❤ by GitHub

	.horizontal-menu li {
	display: inline;
	padding: 0 10px 0 5px;
	border-right: solid 1px #000;
	}
	.horizontal-menu li:last-child {
	border: none;
	}
	.horizontal-menu a {
	font-family: Calibri, cursive; font-size:10pt;
	text-decoration: none;
	}
	.horizontal-menu ul a:hover {
	color: #FFF;
	}
	.doted_line {
	background: url(border-dotted.gif) repeat-x 50% 0%;
	margin: 0px;
	padding: 1px;
	}

view raw css-horizontal-menu.css hosted with ❤ by GitHub

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.