<style>
#btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#btrix-nav li {float: left;}
#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#btrix-nav li a:hover {cursor: pointer;}
#btrix-nav li a:hover img {top: -85px;}
#btrix-nav li a:hover .aname {top: 85px;}
#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#btrix-nav li:nth-child(2) a {background: #9bc704;}
#btrix-nav li:nth-child(3) a {background: #0dc3ff;}
#btrix-nav li:nth-child(4) a {background: #51a2ec;}
#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;} 
</style>
<div id="btrix-nav">
<li> <a href="#"><span class="aname">Home</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU6wZdCen_iyvqb5JWxZg4tvXM33ffS3Q1fDtSAbVz4OWjiYoFdRgv_MmauDPUj7blNHdMGx-Zr-1k-ET30-QHBT1e_XQ84kAdlZMqGabzi-6o4wzGCaI2Kxy_oGc8ZWGRBYp5W1IOgvY/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNuXFmdA7qumyZ4QCUgkdhiTlstkMZdu1cmtku8J4nqxQ9HE0roahBPYt88ZdSKp1FTNBvBIGHKNjJNFyxlX7zxdk1vPRT7aio8NC3r89vrADjdnfCQVN3MsAJDG9gTcOJbKJI3uoIDQ4/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDlqlW9oISUkaVKNuMx4UR1pxByMc0PD4ZdtTYPpVu9yf3B_H04VrKKYCGVJqCaSXFYTxx3099njNgOuTd0g-IwKMU3qi7t4oPRj7MoiY6DVzl4INZfgvczz5l5qOcYQ-byjywxyk4zzI/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPoeQw6rHkkM5gyVftNmf0k3ZzECq0N8cFnXcSiboRiGuhp51ZwJILXvu25iyEQjR4EryfzZxbHrxSylc3yiZOTktubeU6pLzBi8iuzi4R786XH7Zu4n8dKDjAH3bGcpFHAvgqDHbBIPw/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_h4N9e0zS3fj122UmBZ9WRgUwJflFX4c-zLUlmgfr1mZ_-fam3TBZ1lOY6SsBcWyZOLmr2aoDUi8F70jGrOOnsxzXUZoOV4Q6zFOD_IqKr0bC3L31Oh8E76OsJFzVlCZL0vZ4O5usJxA/s1600/btrix-contact.png" /> </a> </li> </div>