aLemmer

Problem

You’d like to use the <ul> element for a navigational structure in a horizontal fashion, but you’re not sure how to do such.

Solution

By using the CSS rule “display: inline” for the <li> elements the unordered list element will display the list item elements side-by-side. We’ll also remove the bullets from the unordered list by defining “list-style-type: none”.

• Lorem Ipsum
• Lorem Ipsum
• Lorem Ipsum
• Lorem Ipsum

1
2
3
4
5
6

<ul id="navi_example">
 <li><a href="/">Lorem Ipsum</a></li>
 <li><a href="/">Lorem Ipsum</a></li>
 <li><a href="/">Lorem Ipsum</a></li>
 <li><a href="/">Lorem Ipsum</a></li>
</ul>

Now onto the CSS for #navi_example…

1
2
3
4
5
6
7
8

#navi_example {
 list-style-type: none;
 margin: 2em 0 2em 0;
}
 
#navi_example li {
 display: inline;
}

Note of line number two and seven. Line number two removes the bullets from the list, whereas line number seven makes the list items display inline.

Spiffing things up

Let’s style the unordered list so that it is more recognizable as a navigation-bar.

• Lorem Ipsum
• Lorem Ipsum
• Lorem Ipsum
• Lorem Ipsum

1
2
3
4
5
6

<ul id="spiffy_navi_example">
 <li><a href="/">Lorem Ipsum</a></li>
 <li><a href="/">Lorem Ipsum</a></li>
 <li><a href="/">Lorem Ipsum</a></li>
 <li><a href="/">Lorem Ipsum</a></li>
</ul>

Now onto the CSS for #spiffy_navi_example…

1
2

#spiffy_navi_example {
 list-style-type: none;

Note that in the next box the value of line-height is equivalent to that of the height‘s. This is to assure that the text is neatly centered upon the middle of the bar.

3
4

 height: 30px;
 line-height: 30px;

5
6
7
8
9
10
11
12
13

 background: #343434;
 text-align: center;
 margin: 2em 0 2em 0;
 padding: 0;
}
 
#spiffy_navi_example li {
 display: inline;
}

The next code-box defines the style of links within the unordered list. It styles a (a link) to be the hex-code-color #fff (white). Upon line 17 it rids the default link-underline via text-decoration: none.

15
16
17
18

#spiffy_navi_example a {
 color: #fff;
 text-decoration: none;
}

Therein the code-box below, the style for a:hover (a mouse-over-ed link) is established. Just to be fancy we’ll underline links consequent to being moused-over (heed line number 20).

19
20
21

#spiffy_navi_example a:hover {
 text-decoration: underline;
}