This small tutorial will show you how to enhance your links and make them look very professional using left and right border styles on the links. This method uses no images and works in all browsers. It is very versatile and can be changed. Highly recommended way of creating a smart navigation.

 I’ve started with just a very simple list of links and some basic styling:
HTML:
<div id=”nav”>
<ul>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
</ul></div>
CSS:
#nav {
width: 300px;
height: 700px;
font-size: 20px;
font-family: “Trebuchet MS”, serif;
}

So far you should have something similar to this. Before I begin on the styling, I am going to remove the bullet points with one quick piece of CSS:
#nav ul {
list-style: none;
}

I now set up the li’s to display how I wish.
CSS:
#nav ul li a {
display: block;
padding: 5px 5px 5px 10px;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

I’ve chosen to use blue as my colour scheme, and have a nice blue as the background. Your list should now look similar to this. I now am going to add the borders which will add style and flare to the list. Add these following lines under #nav ul li a.
CSS:
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;

Try it and you should see a navigation menu looking like this. To edit the borders simply change the 2 lines of CSS we just added. You can then style the hover. I’ll leave that to you, but an example of a hover made by just changing the colours is here.
Good luck!

Categorised under: CSS, Design & Layout, Navigation, Tips & Tutorials by Jack F