It's truly remarkable what can be achieved through CSS, especially with navigation menus. Using the immense power of CSS, we're going to turn this:

...into this:

 

All with just a bit of CSS and this tiny image: Sliver of the background image to be used with the navigation menu (which we've called background.gif). Look very closely and you can see it!

The HTML code for our CSS menu

<div id="nav-menu">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>

That's it! Quite simple really.

Removing the bullets

First thing we'll do is remove the bullets, by creating a new CSS rule:

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

The important CSS command is the first one, list-style: none, which says that we don't want any kind of bullet in our navigation menu. The others are also important to ensure maximum control over the layout and to make sure the text displays in the centre of the box.

With this new CSS rule our menu now looks like:

Needs a bit of work, right?

Displaying the menu items inline

To get these menu items all on to one line we'll insert this CSS rule:

#nav-menu li
{
float: left;
margin: 0 0.15em;
}

The float CSS command is the really important one here as that aligns the menu items up against each other. The margin CSS command gives each menu item no margin to the top or bottom and a 0.15em margin to the left and right.

Our CSS navigation menu now looks like:

 

Now we're getting there! One word of warning, by using float: left, whatever you place below your CSS navigation menu will display alongside the menu and not below it. To get round this, be sure to assign clear: both to whatever's next in the HTML document.

Making the boxes

Right, we've got the menu items all lined up next to each other, so now let's make them look good too. Our final CSS rule is:

#nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

Bit long, eh? Let's go through it, bit-by-bit. The background CSS command is perhaps the most important. In it, we specify the URL of the background image, for there to be a white background behind this image, for the image to be in the bottom-left of the box and for it to be repeated along the x-axis (i.e. horizontally). If we didn't specify the background image to be in the bottom of the box it would be placed in the top left corner. This would cause the white background colour to be visible below the background image, and not above like it is now.

We've specified the height to be double the size of the text at 2em. By specifying the height in terms of em, the height of the box will resize accordingly should a user resize the text on their browser. A line height equal to the height of the box must be specified too, as this is what positions the text in the middle of the box and not at the top.

IE 5 on Mac

You may have noticed the float: left in the above CSS rule. This is there solely for the benefit of IE 5 on Mac - without it, our CSS navigation boxes will stack up on top of each other in this browser. We don't however want other browsers to use this rule, so we need to cancel it for every browser except IE 5 on Mac:

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

The CSS command here, float: none, will cancel out the float: left CSS command because when two CSS commands are specified for the same selector, the second one always takes precedence. This will work for all browsers except IE 5 on Mac, which will be unable to read the second command because of the slashes and stars. (If you really want to know how and why this works, read Commented Backslash MacIE5 CSS Hack by Sam Foster.)

No wrapping please!

There's just one final CSS rule we need to create, and that's to assign a width to our CSS menu navigation. This is optional, but if we don't assign one then menu items on the right may be pushed below the others if users resize their screens. Our new CSS command is:

#nav-menu
{
width:30em
}

Pretty self-explanatory, really!

The finished product

Our final CSS code, all in one place is:

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

#nav-menu li
{
float: left;
margin: 0 0.15em;
}

#nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

#nav-menu
{
width:30em
}

So, here it is, our CSS navigation menu, in all its glory:

 

Take this further

Did you notice that when you mouseover the CSS navigation menu items above, they become underlined? You can specify any hover effect for these menu items, including changing the background image. Simply make a copy of the entire #nav-menu li a CSS rule and change #nav-menu li a to #nav-menu li a:hover. Within this new CSS command, make any changes you like - in this example we changed text-decoration: none to text-decoration: underline.

You could even make two more copies of this CSS rule, for #nav-menu li a:visited and #nav-menu li a:active. These rules would be applied to visited and active links respectively within the CSS navigation. You can then change whatever commands you like for these. Play around and see what you can come up with!

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

What are you working on?

  • End-to-end customer experience

    Join up your customer touchpoints to deliver the best possible digital experience that is proven to deliver outstanding business results

  • Customer loyalty & retention

    Ensure your brand promises are delivered through your digital channels so that your customers return and bring others with them

  • User experience of digital touchpoints

    Make sure all your customer touchpoints consistently deliver the very best in user experience, design and usability.

  • Online sales & conversion optimisation

    Increase conversion across all your digital channels. Our clients sell more because they reap the benefits of our sales optimisation expertise.

  • Digital strategy

    Get ahead of the competition with a customer-centred digital strategy designed to deliver long-term business success.

  • Application & product design

    Deliver the best experience for your customers with intelligent digital applications tailored to your business goals and customer needs.

  • Mobile & tablet strategy

    Improve your mobile & tablet propositions with innovative, cutting-edge interface designs that work for you and your customers.

Webcredible turns 10

Happy Birthday to us

About us

We're a user experience agency (UX agency) that creates people-centred, efficient and delightful digital experiences.

Get in touch on 020 7423 6320

 

Skip to site navigation