Diving into HTML and CSS is an exciting time, but it's scary once you start finding that your floats, positioning, and other styles just aren't behaving the way you expect them to. For the novice web designer, wrangling in lists properly with CSS can be a challenge.

In this post, you'll learn how to use unordered lists to create an HTML and CSS navigation. It is standard practice to use lists this way, though there are those who argue for list-less navigation.

Regardless of whether you choose to design your navigation with lists, understanding how to control them with CSS will benefit you down the line. Ready to start learning?

The HTML

The first step is to create an HTML document, such as list-tutorial.html.

To begin, make a list.

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

This is your basic navigation list.

It looks like a regular list right now, but we’re going to fix that in a minute.

There are two ways to make navigation:

  • vertical, or
  • horizontal.

Horizontal takes a bit more finesse, and that's what we'll cover in this tutorial today.

The CSS

It's time to get some style!

You can learn about the differences between embedded and external CSS, but for this tutorial we will work with embedded CSS.

First of all, let’s get rid of those ugly bullets! To do this, use list-style:

ul#nav {
    list-style: none;
}

If you refresh your browser, you can see those bullets disappear.

"Well", I hear you complaining, "they’re all still stacked on top of each other."

Alright, fine. Here's where the real magic happens. We can fix this one of two ways – either with or without specific widths.

Items With Set Widths

Each navigational item will have the same width.

ul#nav li {
    float: right;
    width: 20%;
}

Items With Relative Widths

Each navigational item will maintain a width relative to its content.

ul#nav li {
    display: inline;
    padding: 0 10px;
}

Try out both versions to see how they behave in your browser. Just [ask me](https://twitter.com/intent/tweet?related=annedorko,withoutboxes&url={{ site.url }}/lists-for-navigation&hashtags=ChatAnneUp&text=@annedorko Please help me with my CSS!) if you have a question.

Don’t forget to style the links from the default color!

The following CSS would apply the unvisited and visited state to be black with a light gray background, the hover and active to white and a dark gray background, a 2px black border to the right of each menu item, padding to the left and right of 10px and top and bottom 5px, font 10px, bold, Verdana.

ul#nav {
    list-style: none;
}
ul#nav li {
    display: inline;
    font: bold 10px Verdana;
}
ul#nav li a {
    padding: 5px 10px;
    color: #000;
    border-right: 2px solid #000;
    background: #CCC;
    text-decoration: none;
}
ul#nav li a:hover {
    color: #FFF;
    background: #333;
}

The result is something like this:

And, like magic, it works!! You can change the colors, fonts, padding, add background images, or anything you need to customize or expand on this simple concept. When I learned out to do this, it changed my whole perceptive on navigation and CSS. I hope that I am able to impact at least one coder who reads this!

Were you expecting more? Sorry, it's just really that simple.

Good luck coding!