This is a quick and simple guide to make a horizontal navigation using CSS.

<div id=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

Remove the bullets with this code:

#nav ul
{
list-style: none;
padding: 0;
margin: 0;
}

To make menu horizontal:

#nav li
{
float: left;
margin: 0 5px;
}

To make the horizontal items into boxes:

#nav li a
{
background: #fff bottom left repeat-x;
height: 30px;
line-height: 30px;
float: left;
width: 100px;
display: block;
border: 1px solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

Final Result: