Dave Woods - Freelance Web Design Warwickshire

CSS Navigation Menu – Basics

CSS menu’s can be very simple but can also cause confusion when combining block and inline elements. This tutorial will hopefully clear up any confusion and demonstrate the best way to structure your navigation in its simplest form.

This demonstration isn’t complicated but I’ve decided to write an article about it as it is very easy to nest elements incorrectly which may lead to invalid code so I thought it might be a good time to put this one to bed and create a simple CSS menu which anyone can use to build and expand upon.

First up, here’s an example of a very simple CSS cross browser compatible menu.

HTML

Here’s the HTML that you’ll need…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>CSS Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="container">
<ul id="navigation">
<li><a href="https://dave-woods.co.uk/">Home</a></li>
<li><a href="https://dave-woods.co.uk/?page_id=2">About</a></li>
<li><a href="https://dave-woods.co.uk/?page_id=67">Services</a></li>
<li><a href="https://dave-woods.co.uk/?page_id=5">Portfolio</a></li>
<li><a href="https://dave-woods.co.uk/?page_id=44">Contact</a></li>
<li><a href="https://dave-woods.co.uk/?page_id=53">Links</a></li>
</ul>
</div>
</body>
</html>

As you can see, the above code simply uses an unordered list for the navigation, contains a list item for each navigational option and within this contains a regular hyperlink.

The big mistake that I often see is where people try to use the anchor tag to surround the list item which in most cases will work but will also invalidate your HTML.

CSS

The CSS is also amazingly simple so we’ll start off with some generic styling information which resets the padding and margin, sets the font size and also removes the bullet from the unordered list.

* {
padding: 0;
margin: 0;
}
body {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 100%;
}
#container {
font-size: 1em;
}
#navigation {
list-style-type: none;
}

On it’s own this will do very little other than apply some basic formatting but with the next style you should notice a significant difference so next we’ll style the actual link itself.

#navigation a, #navigation a:link {
background-color: #F60;
border: 1px solid #000;
color: #FFF;
text-decoration: none;
margin: 1px;
width: 6em;
padding: 0.5em;
display: block;
}

This will target the link and apply the colour and spacing of the link so feel free to play with these settings to create the style you require.

However, the anchor tag is an inline element and therefore any inline element will ignore margin, width and height by default. However, if we use display: block; on this element then these values can be applied with the added benefit of the element automatically adjusting to fill the width of it’s parent (i.e. the 6em of #navigation minus any padding and margin).

Finally, we’ll add a hover colour to the link to give it a bit of movement when the mouse is hovered over the link.

#navigation a:hover {
background-color: #06C
}

Summary

It really is that simple. You could of course apply a background image to the states of the button to give it a more interesting look and could also supply styling to the containing unordered list or to any containing div’s if required.

And you could also create the same menu, lined up horizontally by simply adding the following bit of code to your CSS.

#navigation li {
float: left;
}

Most menu’s do get a lot more complicated than this example but it should hopefully give a few designers a basis from which to start their coding for a navigational menu.

10 comments on “CSS Navigation Menu – Basics

  1. Dave Post author

    Yep, without the display block, the margin and width won’t be applied to the anchor so it’s the key.

    It’s something which is often overlooked as people try to apply a width to a link and then instead decide to revert to wrapping a block element so they can get the effect they’re after which is of course wrong and invalid.

  2. Ed

    Hi Dave.

    I’ve been using tables for so long and am trying to replace this with styled divs where possible (as this seems to be the way things are going). In the example like the one above, using the horizontal version, how do I place the next div (still within the container) on a new line? At the moment it goes to the right of the floated divs which is not what I want.

    i.e.

    Home
    About
    Services
    Portfolio
    Contact
    Links

    Hello

  3. Ed

    Sorry, my post didn’t display properly, I was trying to paste my code which got changed when processed. Hopefully my question is clear.

  4. Dave Post author

    Hi Ed,

    Yeah that makes sense. What you need to do is use clear: both; on the element that follows the navigation container.

    If that doesn’t make sense, could you put up an example page somewhere and I’ll be happy to take a look.

    Or feel free to drop me an email with some sample code and I’ll see what’s wrong with it.

    Cheers.

  5. ChiChi

    Hello Dave….Nice to meet ya!

    I am a newbie and have beem aimlessly searching for the right navigation menu and it seems that css is the way to go these days. Your CSS menu is such a simple code that I can’t help but like it. The in a seems cleaner than placing it in or as many other coders do.

    I would like a vertical menu that when clicked, a list of submenu links dropped down underneath. Is ther a fairly easy way to add this function to your simple CSS menu? A short java script or dynamic coding or even html?

    I have found several other menu’s but they seem to be bulky and may require several .js files, the CSS file and also may have excessive html code as well. I am concerned about cross browser compatability and this seems to be a priority for you as well, this is why I am contacting you.

    I assume that simple is better, but some of the other simple codes I’ve found may only work on 1 or 2 browsers. I am afraid to make a final decision.

    I was wondering if you could help me out and point me in the right direction. Either a link, instructions or some advice would be greatly appreciated.

    You have a great site btw, unlike alot of crap thats floating around on the net.

    From ChiChi…an inspiring designer!

  6. ChiChi

    Last sentence in the 1st paragraph re phrased:

    The UL in a DIV seems cleaner than placing it in FORM or TABLE as many other coders do.

  7. ChiChi

    I just wanted to say that I found a way to open up submenu’s with a small javascript code. I know you can do it via CSS but from the stats I read on W3C, I’m guess I won’t worry about non javascript users. I’ll prob make a text alternative version anyway for all those text browsers & mobile deices.

    I have made several sites using MS Publisher and I know how bad that is from all the negative responses in forums and such. I am now learning CSS and coding my own site using nothing but notepad. Microsoft is still being a burdon will all the issue’s with IE. I always thought MS was a leader but not when it comes to web or even hotmail as far as that goes.

    Anyway, I just wanted to make a point that you offer some great advice and information for a struggling novice. It seems like no matter what info I am surfing for…there is Dave Woods.

    This is just a THANK YOU for having your website and you should know that your efforts are appreciated. It’s funny how you can explain something in just a few short paragraphs and it makes perfect sense when I’ve read other sites thats page after page of technical mumbo jumbo that I end up more confused than when I started.

    You have a talent for explaining things. So..Thanks Dave!

    Maybe I’ll start a fan club for you!