create dropdown horizontal menu (navigation bar)

Code :

<ul class="nav">
<li class="nav-item"><a href="home">Home</a>
</li>
<li class="nav-item"><a href="home">
Portfolio</a>
<ul class="submenu">
<li><a href="#wedesign">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">App Development</a></li>
<li><a href="#">SEO</a></li>
</ul>
</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;
 background-color: #2CC3A1;
 
}
.nav .nav-item:hover
{
 background-color: #5591DF;
 

}
.nav .nav-item a
{
 text-decoration: none;
 color: white;
 display: block;
 text-align: center;
 padding: 5px 10px;
 
 
}
.nav-item a:hover
{

 

}
/*----- Submenu -----*/
.nav .submenu
{
 list-style: none;
 position: absolute;
 margin: 0;
 padding: 0;
 display: none;
 
}
.nav li:hover .submenu
{
 display: block;
}
.nav .submenu li
{
 background-color: #5591DF;
}
.nav .submenu li:hover
{
 background-color: #80b1ef;
}
.nav .submenu li a
{
 list-style: none;
 text-align: left;
 
 
}

Demo