JSFiddle - React, Tailwind, and code Playground

http://forrst.com/posts/Creating_Nav_With_CSS_Finished-s60

by tw16

HTML

<ul id="nav"> 
    <li id="li_blog" class="active"><a href="index.html">Blog</a></li> 
    <li id="li_ebook"><a href="ebooks.html">Ebooks</a></li> 
    <li id="li_arquivo"><a href="arquivo.html">Arquivo</a></li> 
    <li id="li_newsletter"><a href="newsletter.html">Newsletter</a></li> 
    <li id="li_sobre"><a href="sobre.html">Sobre</a></li> 
    <li id="li_contato"><a href="contato.html">Contato</a></li> 
</ul><!-- End of Navigation -->

CSS

#nav{
    display: block;
    position: relative;
    background-color: #fff;
    border-bottom: 2px solid #a8c9cb;
    border-top: 6px solid #009999;
    height: 98px;
    list-style-type: none;
    margin: 0 auto;
}
#nav li {
    display: block;
    float: left;
    text-transform: uppercase;
    margin-top: 22px;
}
#nav li a {
    display: block;
    float: left;
    padding: 35px 20px 20px 20px; /* top, left, right, bottom */
    text-decoration: none;
    font: 14px/20px estre, sans-serif;
    color: #ff3333;
    background-position: 50% 0; /* center top */
    background-repeat: no-repeat;
}
#nav li a:link, #nav li a:visited{
    color: #000000;
    text-decoration: none;
}
#nav li a:hover{
    color: #ff3333;
    text-decoration: underline;
}
#nav li a.active {
    background-position: 50% -32px; /* minus the height of the icon */
    color: ff3333;
}

/*
    Then, repeat these for each navigation item.
*/

/* THE ICONS FOR THE NAVIGATION */

#nav li#li_blog a {
    background-image: url('../images/home_icon.png');
}
#nav li#li_ebook a {
    background-image: url('../images/ebook_icon.png');
}
#nav li#li_arquivo a {
    background-image: url('../images/arquivo_icon.png');
}
#nav li#li_newsletter a {
    background-image: url('../images/newsletter_icon.png');
}
#nav li#li_sobre a {
    background-image: url('../images/sobre_icon.png');
}
#nav li#li_contato a {
    background-image: url('../images/contato_icon.png');
}
/* End of THE ICONS FOR THE NAVIGATION */