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; }