Horizontal Navigation Bars

List of Links

The HTML 5 <nav> element is used to contain website navigation links, usually as a navigation bar.

The navigation bar is declared as an unordered list of hyperlinks:

HTML
1
2
3
4
5
6
7
8
9
<nav>
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="sport.html">Sport</a></li>
        <li><a href="music.html">Music</a></li>
        <li><a href="study.html">Study</a></li>
        <li><a href="drama.html">Drama</a></li>
    </ul>
</nav>

CSS Formatting

Note: This topic uses CSS Descendant Selectors.

Remove the bullet points from the <li> elements

CSS
1
2
3
nav ul {
    list-style-type:none;
}

Position list items horizontally, evenly spaced out

Each list item is centred in an 80px wide box, and floated so they are displayed alongside each other

CSS
1
2
3
4
5
nav ul li {
    float:left;
    width:80px;
    text-align:center;
}

Creating clickable boxes

In most navigation bars, clicking the area around the hyperlink also selects the link. A clickable box area around the link text is achieved by displaying the <a> element as a block. This is made visible by giving each link a border and a background colour.

Padding is used to add some (vertical) space around the text for the link.

The underlining can also be removed from the hyperlinks at in the same block.

CSS
1
2
3
4
5
6
7
nav ul li a {
    display:block;
    padding:8px;
    background-color:wheat;
    border: 1px solid black;
    text-decoration:none;
}

Adding interactive colours

The state of the <a> element can be styled to change the background colour and text colour of each link when the mouse hovers over an <a> element:

CSS
1
2
3
4
nav ul li a:hover {
    background-color:#000;
    color:white;
}

Complete HTML and CSS

HTML
1
2
3
4
5
6
7
8
9
<nav>
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="sport.html">Sport</a></li>
        <li><a href="music.html">Music</a></li>
        <li><a href="study.html">Study</a></li>
        <li><a href="drama.html">Drama</a></li>
    </ul>
</nav>
CSS
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
nav ul {
        list-style-type:none;
}
 
nav ul li {
        float:left;
        width:80px;
        text-align:center;
}
 
 
nav ul li a {
    display:block;
    padding:8px;
    background-color:wheat;
    border: 1px solid black;
    text-decoration:none;
}
 
nav ul li a:hover {
    background-color:#000;
    color:white;
}