A Simple HTML menu

Going to kick off my blog with a simple look at how to build a very simple menu. Looking at the convention of building your main navigation as an unordered list with each list item being a menu item.

View Demo

The first thing to write would be your unordered list…

  <ul id="menu">
    <li><a href="#yourlinkhere">Menu Item 1</a></li>
    <li><a href="#yourlinkhere">Menu Item 2</a></li>
    <li><a href="#yourlinkhere">Menu Item 3</a></li>
    <li><a href="#yourlinkhere">Menu Item 4</a></li>

The list will currently be vertical with a dot beside each list item, this is the normal browser default for displaying an unordered list. We are going to use CSS to change this to each item having no dot, no text decoration(the anchor tag underlining on hover) and each item being in line with each other.

  #menu {
    margin:20px 0 20px -10px;

We set up our menu code by zeroing the padding on the element and adding a margin of 20px to the top and bottom, the -10px value on the left margin is to bring the entire menu in by 10px to correct the loss of alignment caused by adding a 10px padding to the a element a little further on. It is not the greatest way of correcting the alignment but as we want a simple menu its a little cheaty way of doing it that only leaves the problem of the hit point for the click out of alignment rather than the element itself. We use overflow hidden here so that the inside contents of the menu tag which are all floated get cleared.

  #menu li {
  #menu li a {
    padding:3px 10px;

First we float all of the list elements to the left and set a list-style-type of none on them all to make them display horizontally and remove the dot.

On the anchor element we set display block to turn the anchor element into a block element, this means we can set padding on it(inline elements cannot have margin and padding applied in the same way). The padding gives the actual link more size which means it will be easier to click, setting the padding on the list element would result in a smaller click surface as it would effectively give a margin around the list element. We set text-decoration to none here to remove lines from under the link and the link colour to remove the browser default nastiness.

  #menu li a:hover {

We finish off our simple menu by setting the hover colour on the anchor tag, these 2 are very similar but in more complicated versions of the menu you can play with background colours and text colours to create contrast. You should also add an active state for the list item that corresponds to the page you are actually on, this is helpful to show you that clicking it wont do you any good as you will end up where you already are.