Creating an accessible navigation menu from a UL

To start with, we create the markup for our navigation..

<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="about/">About</a></li>
<li><a href="contact/">Contact</a></li>
</ul>

Obviously you can put as many or few items as you need into the list.

Now to style the list…. first we’ll style it horizontally:

ul.nav,ul.nav li,ul.nav li a 
{
display:block;
float:left;
margin:0;
padding:0;
}
ul.nav li a
{
padding: 4px 8px;
text-decoration: none;
background: #ccc;
border: 1px solid #999;
margin-right: -1px;
}
ul.nav li a:hover
{
background: #f90;
color: #fff;
}

and now vertically, just to show how it works…

ul.nav,ul.nav li,ul.nav li a 
{
display:block;
margin:0;
padding:0;
}
ul.nav li a
{
padding: 4px 8px;
text-decoration: none;
background: #ccc;
border: 1px solid #999;
margin-bottom: -1px;
}
ul.nav li a:hover
{
background: #f90;
color: #fff;
}

Obviously, you have the freedom to apply any CSS you want to the blocks..