How To Make A Navbar Like WikiHow?

I would like a navbar like WikiHow with a icon on top and text beneath. I have been taking a look at their code but it seems pretty messy and I think there is easier ways to do it.

Solution 1:

By default inline blocks will align based on their text baseline.

Just add vertical-align: top; to the CSS for nav ul li to have them align by their top edge instead.

Solution 2:

Here's my version: http://jsfiddle.net/JmZbG/2/

And here's an explanation of the changes:

nav ul li {
    border-left: 1px solid red;
    height: 80px;
    line-height: 80px; /* Center the labels vertically */
    float: left; /* Another way of lining up the <li>s horizontally */ 
    display: inline-block;
}

.nav_icon {
    display: inline-block; /* Needs to be an inline-block to be inline with the text */
    vertical-align: middle; /* This centers the image vertically in it's <li> */
    width: 46px; /* Need to define a size for an empty <div>... */
    height: 41px; /* ...in order to see the background image */
    background-image: url("http://i.imgur.com/mDXvZOZ.jpg");
}