<style type="text/css">
#avd-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#avd-nav li {float: left;}
#avd-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;}
#avd-nav li a span.myname {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);}
#avd-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#avd-nav li a:hover {cursor: pointer;}
#avd-nav li a:hover img {top: -85px;}
#avd-nav li a:hover .myname {top: 85px;}
#avd-nav li:nth-child(1) a {background: #0088cc;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#avd-nav li:nth-child(2) a {background: #cc6600;}
#avd-nav li:nth-child(3) a {background: #00cccc;}
#avd-nav li:nth-child(4) a {background: #00cc66;}
#avd-nav li:nth-child(5) a {background: #00cc66;} border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
</style>
<div id="avd-nav">
<li> <a href="#"><span class="myname">Homes</span> <imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6DR5IiXmKarkpAjGIQsiylPQ8vZdt8kBQ76vNueuFoPcKXkg3kCqoC8VK_QtRd9W9hnsZEKzTRdHSvufJ8BJzWq_ELW-wrneEmPHGwwpFca3kOdA5ZNHa6LMlUyxPUnzy1no9pO8kxpM/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">About</span> <imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6DR5IiXmKarkpAjGIQsiylPQ8vZdt8kBQ76vNueuFoPcKXkg3kCqoC8VK_QtRd9W9hnsZEKzTRdHSvufJ8BJzWq_ELW-wrneEmPHGwwpFca3kOdA5ZNHa6LMlUyxPUnzy1no9pO8kxpM/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname"> Author</span> <imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6DR5IiXmKarkpAjGIQsiylPQ8vZdt8kBQ76vNueuFoPcKXkg3kCqoC8VK_QtRd9W9hnsZEKzTRdHSvufJ8BJzWq_ELW-wrneEmPHGwwpFca3kOdA5ZNHa6LMlUyxPUnzy1no9pO8kxpM/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">Contact</span> <imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6DR5IiXmKarkpAjGIQsiylPQ8vZdt8kBQ76vNueuFoPcKXkg3kCqoC8VK_QtRd9W9hnsZEKzTRdHSvufJ8BJzWq_ELW-wrneEmPHGwwpFca3kOdA5ZNHa6LMlUyxPUnzy1no9pO8kxpM/s1600/Arrows-Up-circular-icon.png" /> </a> </li> </div>
hasilnya:
