How to create sub menu for this code?

Question

Html code:

<div class="top-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" class="black">Project Master</a> </li>
<li><a href="#" class="black1">Type master</a></li>
<li><a href="#" class="black2">Crticality master</a></li>
<li><a href="#" class="black3">ERP Type</a></li>
<li><a href="#" class="black4">Contact</a></li>
</ul>
</div>

________________________________________________

Css Code:

________________________________________________

.top-nav ul li {
list-style:none;
}
.top-nav ul li a {
display:block;
outline: none;
color: #fff;
text-decoration: none;
font-size: 1.3em;
padding: 1em;
text-align: right;
background:#30383b;
}
.top-nav ul li a.black{
background:#30383c;
}
.top-nav ul li a.black1{
background: #333a3e;
background: -moz-linear-gradient(top, rgba(51,58,62,1) 0%, rgba(46,54,58,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,58,62,1)), color-stop(100%,rgba(46,54,58,1)));
background: -webkit-linear-gradient(top, rgba(51,58,62,1) 0%,rgba(46,54,58,1) 100%);
background: -o-linear-gradient(top, rgba(51,58,62,1) 0%,rgba(46,54,58,1) 100%);
background: -ms-linear-gradient(top, rgba(51,58,62,1) 0%,rgba(46,54,58,1) 100%);
background: linear-gradient(to bottom, rgba(51,58,62,1) 0%,rgba(46,54,58,1) 100%);
}
.top-nav ul li a.black2{
background: #333b3e;
background: -moz-linear-gradient(top, rgba(51,59,62,1) 0%, rgba(46,54,58,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,59,62,1)), color-stop(100%,rgba(46,54,58,1)));
background: -webkit-linear-gradient(top, rgba(51,59,62,1) 0%,rgba(46,54,58,1) 100%);
background: -o-linear-gradient(top, rgba(51,59,62,1) 0%,rgba(46,54,58,1) 100%);
background: -ms-linear-gradient(top, rgba(51,59,62,1) 0%,rgba(46,54,58,1) 100%);
background: linear-gradient(to bottom, rgba(51,59,62,1) 0%,rgba(46,54,58,1) 100%);
}
.top-nav ul li a.black3{
background: #333a3e;
background: -moz-linear-gradient(top, rgba(51,58,62,1) 0%, rgba(46,54,58,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,58,62,1)), color-stop(100%,rgba(46,54,58,1)));
background: -webkit-linear-gradient(top, rgba(51,58,62,1) 0%,rgba(46,54,58,1) 100%);
background: -o-linear-gradient(top, rgba(51,58,62,1) 0%,rgba(46,54,58,1) 100%);
background: -ms-linear-gradient(top, rgba(51,58,62,1) 0%,rgba(46,54,58,1) 100%);
background: linear-gradient(to bottom, rgba(51,58,62,1) 0%,rgba(46,54,58,1) 100%);
}
.top-nav ul li a.black4{
background: #323a3e;
background: -moz-linear-gradient(top, rgba(50,58,62,1) 0%, rgba(46,54,58,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(50,58,62,1)), color-stop(100%,rgba(46,54,58,1)));
background: -webkit-linear-gradient(top, rgba(50,58,62,1) 0%,rgba(46,54,58,1) 100%);
background: -o-linear-gradient(top, rgba(50,58,62,1) 0%,rgba(46,54,58,1) 100%);
background: -ms-linear-gradient(top, rgba(50,58,62,1) 0%,rgba(46,54,58,1) 100%);
background: linear-gradient(to bottom, rgba(50,58,62,1) 0%,rgba(46,54,58,1) 100%);
}
.top-nav ul li a:hover,.top-nav ul li.active a {
background: #23aeac;
}