MULTI COLOR CHILD MENU

===================================================================
COPY AND PASTE CODE
READ MORE;
http://www.bloggertrix.com/2013/08/Css-Icon-Hover-Effect-Navigation-Bar.html
====================================================================

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

<br />
<div id="btrix-nav">
<li> <a href="1#"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOqMpGajhqPb0YOzpcip2Gyj7olN-eq1Vq5wIpYe_FhGLEx9jMsrp0Mef22AzBw3v1n7IUYsEOYhKMxCC5VfvYQ_Pbp-NRhU-K8WLRUDXqU7oW-k7eMtdtGi7wmQt_pUxcpHNB0lRzmoc/s1600/btrix-home.png" /> </a> </li>
<li> <a href="h2#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMw4taItswPHdjR1jjrtW8EpZPTx_lYinXTFHzP_6c78NUn32-dSIvVqicawDtzSHz2CoPulkkXP6Jqf5bNH-q5gX9dVuKRELEZ-LwTs78wOGjbaOSPs_m4ZCA4_u7leVLqhoxIcSG9-8/s1600/btrix-download.png" /> </a> </li>
<li> <a href="3#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitJaBuIWe9mQDPi23A9bR1tn6UqyV_BUzeZjrFe6M8_GOmkZ3OM8EX8rtGbTqQEv0ZaVQryjQhOhWxiKatiZTI-3K7-QLsU3fnLnzCCV3vDL0N0sUvRNILQSZx2l3zTmN2phBkixrLGOM/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="4#"> <span class="aname"> Html5</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZlkDs7tm4OJufuL_ZBHFYL8Qsw_h1P5VouoLsdDXDQE3MTazjAOmQ9ZMrr_5bEQkkrt5eKlhJRIQVnwkEPOdY5GR8q4XnGT4jCR2qRGqHJtH2VeVHoQJ6yNKjdT8XBtbpvQCshpmelCY/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="5#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGJd-b-Mf3geI1m8eNnaGE98Py715fv7RiwnxEaJl2mRcupix3_KLsj7Sdb1smbK0mcGa-PlJqFGSI2hGb99iSHPRRDNnkLzAT9YutY0sj9JV5dRlgodhFCgtIQQYdF8hoS3cp1nn-6wQ/s1600/btrix-contact.png" /> </a> </li>
</div>
======================================================================

Homes

Download

MySql

Html5

Contact