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..