simple horizontal navigation menu

Code :

<ul class="nav">
<li class="nav-item f1"><a href="home">Home</a>
</li>
<li class="nav-item"><a href="home">
Portfolio</a>
</li>
<li class="nav-item"><a href="home">
Services</a>
</li>
<li class="nav-item"><a href="home">
BLog</a>
</li>
<li class="nav-item"><a href="home">
About</a>
</li>
</ul>

CSS :

.nav
{
 list-style: none;
   
 
}
.nav .nav-item
{
 
    float: left;
 
}
.nav .nav-item:hover
{
 

}
.nav .nav-item a
{
 text-decoration: none;
 color: white;
 display: block;
 text-align: center;
 padding: 5px 10px;
 background-color: #5591DF;
 
}
.nav-item a:hover
{
 background-color: #77ACFF;

}

Demo