menu

by ASHISH ROX

HTML

<nav> 
  <ul id="menu"> 
     <a href=""><li class="inicio"> <span class="txt">Explorar</span></li></a>
     <a href=""><li class="tutoriales"> <span class="txt">Tutoriales</span></li></a>
     <a href=""><li class="maestros"> <span class="txt">Maestros</span></li></a>
     <a href=""><li class="comprar"> <span class="txt"> Comprar</span></li></a>
     <a href=""><li class="contacto"> <span class="txt"> Contacto</span></li></a>
  </ul>
 </nav>

CSS

nav {
   overflow:hidden;
   width:725px;
   height:180px;
   padding:10px;
   display:block;
   margin:100px auto;
}
nav a {
color:#fff;
font-family:arial, verdana;
}
 #menu {
   display:block;
   margin:0px auto;
   list-style:none;
}
#menu li {
    margin:8px;
    display:inline-block;
    background:#00d6ff;
    width:125px;
    height:125px;
    text-align:center;
    border-radius:4px;
    box-shadow:0px 1px 3px 0px #444;
transition:all 0.3s ease-in;
-moz-transition:all 0.3s ease-in;
-webkit-transition:all 0.3s ease-in;
-ms-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
}
#menu li .txt {
   display:block;
   margin:100px auto;
   color:#fff;
   opacity:0;
   font-size:19px;
   padding:5px;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
}

#menu li:hover > .txt {
   margin:80px auto;
   opacity:1;
}
#menu li:hover {
transform:scale(1.1,1.1);
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
}
#menu a .inicio {
background-image:url(home.png);
background-position:23px 15px;
background-repeat:no-repeat;
background-size:80px 75px;
}
#menu a .tutoriales {
background-image:url(tutoriales.png);
background-position:30px 25px;
background-repeat:no-repeat;
background-size:55px 55px;
}
#menu a .maestros {
background-image:url(maestros.png);
background-position:30px 25px;
background-repeat:no-repeat;
background-size:65px 55px;
}
#menu a .comprar {
background-image:url(comprar.png);
background-position:35px 23px;
background-repeat:no-repeat;
background-size:70px 60px;
}
#menu a .contacto {
background-image:url(contacto.png);
background-position:32px 27px;
background-repeat:no-repeat;
background-size:65px 55px;
}