Beautiful navigation

There is one design studio, with an incomprehensible name The Design Canopy , their navigation is very interesting. Now we will try to write the same with the help of css.

Since this is a navigation, therefore it should be clickable and consist of a number of links. Also, it should be noted that the inscription on one button consists of two fonts, each of which has its own size. Perhaps we will start:

<a href="#"><span>Section One</span>Semantics</a>
<a href="#"><span>Section Two</span>Semantics</a>
<a href="#"><span>Section Three</span>Semantics</a>
<a href="#"><span>Section Four</span>Semantics</a>

The first thing you need to determine the width and padding links in order to recreate a convenient clickable area and, of course, a beautiful - nice looking - background. Defining a span as a block will help us avoid all unnecessary <br /> s. Here is the final result:
')
a {
text-transform: uppercase;
font-size: 2.5em;
font-weight: bold;
letter-spacing: -1px;
color: red;
display: block;
padding: 0.5em;
float: left;
width: 8em;
text-decoration: none;
line-height: 0.5em;
}
a span {
color: #666;
display: block;
font-size: 50%;
letter-spacing: 0;
margin-bottom: 0.3em;
}
a:hover {
background-color: #fffea4;
}

[ Example ]