WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<style> #fbt-nav {margin:0 auto;list-style: none;width: 965px;height: 86px;overflow-y: hidden;} #fbt-nav li {float: left;} #fbt-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;} #fbt-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);} #fbt-nav li a img {position: relative;top: 0;transition: top .5s ease;} #fbt-nav li a:hover {cursor: pointer;} #fbt-nav li a:hover img {top: -85px;} #fbt-nav li a:hover .aname {top: 85px;} #fbt-nav li:nth-child(1) a {background: #150517;border-radius: 5px 0 0 5px;} #fbt-nav li:nth-child(2) a {background: #3E3535;} #fbt-nav li:nth-child(3) a {background: #4A4344;} #fbt-nav li:nth-child(4) a {background: #595454;} #fbt-nav li:nth-child(5) a {background: #616D7E;} #fbt-nav li:nth-child(6) a {background: #5E5A80;} #fbt-nav li:nth-child(7) a {background: #2B60DE;} #fbt-nav li:nth-child(8) a {background: #38ACEC;border-radius: 0 5px 5px 0;} </style> <div id="fbt-nav"> <li> <a href="/"><span class="aname">Homepage</span> <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/48/Places-user-home-icon.png" /> </a> </li> <li> <a href="#"> <span class="aname">Archive</span> <img src="http://icons.iconarchive.com/icons/kearone/comicons/48/zip-software-icon.png" /> </a> </li> <li> <a href="#"> <span class="aname">About me</span> <img src="http://icons.iconarchive.com/icons/aha-soft/standard-portfolio/48/About-icon.png" /> </a> </li> <li> <a href="#"> <span class="aname">Our Blog</span> <img src="http://icons.iconarchive.com/icons/scoyo/badge/48/My-Blog-icon.png" /> </a> </li> <li> <a href="#"><span class="aname">Science</span> <img src="http://icons.iconarchive.com/icons/iconshock/real-vista-education/48/technology-icon.png" /> </a> </li> <li> <a href="#"><span class="aname"> Sports </span> <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/48/Games-Soccer-icon.png" /> </a> </li> <li> <a href="#"><span class="aname">Photos</span> <img src="http://icons.iconarchive.com/icons/apathae/satellite/48/2-Pictures-icon.png" /> </a> </li> <li> <a href="#"> <span class="aname">Contact</span> <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Email-Download-icon.png" /> </a> </li> </div>
<!-- Replace with your HTML Code (Leave empty if not needed) -->
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<style> #fbt-nav {margin:0 auto;list-style: none;width: 965px;height: 86px;overflow-y: hidden;} #fbt-nav li {float: left;} #fbt-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;} #fbt-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);} #fbt-nav li a img {position: relative;top: 0;transition: top .5s ease;} #fbt-nav li a:hover {cursor: pointer;} #fbt-nav li a:hover img {top: -85px;} #fbt-nav li a:hover .aname {top: 85px;} #fbt-nav li:nth-child(1) a {background: #150517;border-radius: 5px 0 0 5px;} #fbt-nav li:nth-child(2) a {background: #3E3535;} #fbt-nav li:nth-child(3) a {background: #4A4344;} #fbt-nav li:nth-child(4) a {background: #595454;} #fbt-nav li:nth-child(5) a {background: #616D7E;} #fbt-nav li:nth-child(6) a {background: #5E5A80;} #fbt-nav li:nth-child(7) a {background: #2B60DE;} #fbt-nav li:nth-child(8) a {background: #38ACEC;border-radius: 0 5px 5px 0;} </style> <div id="fbt-nav"> <li> <a href="/"><span class="aname">Homepage</span> <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/48/Places-user-home-icon.png" /> </a> </li> <li> <a href="#"> <span class="aname">Archive</span> <img src="http://icons.iconarchive.com/icons/kearone/comicons/48/zip-software-icon.png" /> </a> </li> <li> <a href="#"> <span class="aname">About me</span> <img src="http://icons.iconarchive.com/icons/aha-soft/standard-portfolio/48/About-icon.png" /> </a> </li> <li> <a href="#"> <span class="aname">Our Blog</span> <img src="http://icons.iconarchive.com/icons/scoyo/badge/48/My-Blog-icon.png" /> </a> </li> <li> <a href="#"><span class="aname">Science</span> <img src="http://icons.iconarchive.com/icons/iconshock/real-vista-education/48/technology-icon.png" /> </a> </li> <li> <a href="#"><span class="aname"> Sports </span> <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/48/Games-Soccer-icon.png" /> </a> </li> <li> <a href="#"><span class="aname">Photos</span> <img src="http://icons.iconarchive.com/icons/apathae/satellite/48/2-Pictures-icon.png" /> </a> </li> <li> <a href="#"> <span class="aname">Contact</span> <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Email-Download-icon.png" /> </a> </li> </div>
<!-- Replace with your HTML Code (Leave empty if not needed) -->
/* Replace with your JS Code (Leave empty if not needed) */