Giuseppe Gerbino tarafından hazırlanmış olan menü örneğini paylaşırken  bu özeliğin resimler  üzerinde  kullanılabileceği  hakkında  bir  fikir  belirtmiştim.  Hemen işe  koyulup  sizlere  menü örneğinin  resimler  için olan versiyonunu  hazırladım. Başlangıçta  düşündüğüm  örneği hazırlamak  için  çok fazla css kodu kullanmam gerekiyordu. Giuseppe Gerbino‘nun hazırladığı  örnekteki alt menüler  için kullandığı n1, n2, n3, n4, n5  sınıflarını a, b, c olarak elimden geldiği kadar sizler  için kısaltmaya ve kullanılabilir  bir hale getirmeye  çalıştım. Şimdilik  sadece a, b ve c  olmak  üzere üç tane aynı özelliklere  sahip  ama ayrı arkaplan resimleri  ekleyebileceğiniz sınıf  bulunuyor.  Eğer  daha fazla resim eklerseniz  daha  fazla sınıf eklemeniz gerekiyor.  A, b ve c  sınıfları  toplamda  5 basamaktan oluşuyor buna her resmin beş farklı  parçaya  bölündüğünü  söyleyebiliriz  ama sizin resim eklemek  için eşit oranlarda  beş parçadan oluşa resimler  oluşturmanız gerekmiyor.  A, b ve c  sınıflarının bağlı  olduğu .navigation li sınıfına  bir  arkaplan eklemeniz  yeterli olacaktır. Css’de kullandığım background-position  ile her  basamak için resmin farklı  pozisyonları gözüküyor. Buda resim  eklemede  iyi  bir  kolaylık oldu sizin için. Başlangıç olarak bilmeyenler  için biraz  fazla karmaşık görünebilir  ama iyice  css kodları  incelerseniz  ve a, b, c  sınıflarını  nasıl çoğalttığıma  dikkat  ederseniz  çok kolay bir  şekilde  sizde kendinize  göre  düzeleyebilirsiniz.

 Kullanım

• Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

body { background: #E9E9E9; }
h2 { text-align: center; color: #CCC; }

/* https://www.mintik.com/?p=13496 */

a {
  display: block;
  text-decoration: none;
  width: 100%;
  height: 100%;
  color: #999;
}

a:hover { color: #777; }

.container {
  width:770px;
  margin: 20px auto; 
}

/* NAVIGATION */
.navigation {
  list-style: none;
  padding: 0;
  width: 250px; 
  height: 40px; 
  background: #95C11F;
  position: relative; 
  z-index: 100;
  float:left;
  margin-left:5px;
}

.navigation, .navigation a.main {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.navigation:hover, .navigation:hover a.main {
  border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
}

.navigation a.main {
  display: block; 
  height: 40px;
  font: bold 15px/40px arial, sans-serif; 
  text-align: center; 
  text-decoration: none; 
  color: #FFF;  
  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  position: relative;
  z-index: 100;
}

.navigation:hover a.main {
  color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.04);
}

.navigation li { 
  width: 250px; 
  height: 40px;
  background: #F7F7F7;
  font: normal 12px/40px arial, sans-serif !important; 
  color: #999;
  text-align: center;
  margin: 0;
  -webkit-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: perspective(350px) rotateX(-90deg);
  -o-transform: perspective(350px) rotateX(-90deg);
  transform: perspective(350px) rotateX(-90deg);
  box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
  -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
  -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}

.navigation li:nth-child(even) { background: #F5F5F5; }
.navigation li:nth-child(odd) { background: #EFEFEF; }

.navigation li.a1, .navigation li.a2, .navigation li.a3, .navigation li.a4, .navigation li.a5 { 
  -webkit-transition: 0.2s linear 0.8s;
  -o-transition: 0.2s linear 0.8s;
  transition: 0.2s linear 0.8s;
  background-image:url(man-of-steel-flag.png);
  background-position: 0px 0px;
}

.navigation li.b1, .navigation li.b2, .navigation li.b3, .navigation li.b4, .navigation li.b5 { 
  -webkit-transition: 0.2s linear 0.8s;
  -o-transition: 0.2s linear 0.8s;
  transition: 0.2s linear 0.8s;
  background-image:url(iron-man.png);
  background-position: 0px 0px;
}

.navigation li.c1, .navigation li.c2, .navigation li.c3, .navigation li.c4, .navigation li.c5 { 
  -webkit-transition: 0.2s linear 0.8s;
  -o-transition: 0.2s linear 0.8s;
  transition: 0.2s linear 0.8s;
  background-image:url(hulk.png);
  background-position: 0px 0px;
}

.navigation li.a1, .navigation li.b1, .navigation li.c1 { 
  -webkit-transition: 0.2s linear 0.8s;
  -o-transition: 0.2s linear 0.8s;
  transition: 0.2s linear 0.8s;
  background-position: 0px 0px;
}
.navigation li.a2, .navigation li.b2, .navigation li.c2 {
  -webkit-transition: 0.2s linear 0.6s;
  -o-transition: 0.2s linear 0.6s;
  transition: 0.2s linear 0.6s;
  background-position: 0px 360px;
}
.navigation li.a3, .navigation li.b3, .navigation li.c3 {
  -webkit-transition: 0.2s linear 0.4s;
  -o-transition: 0.2s linear 0.4s;
  transition: 0.2s linear 0.4s;
  background-position:0px 320px; 
}
.navigation li.a4, .navigation li.b4, .navigation li.c4 { 
  -webkit-transition:0.2s linear 0.2s;
  -o-transition:0.2s linear 0.2s;
  transition:0.2s linear 0.2s;;
  background-position:0px 280px;  
}
.navigation li.a5, .navigation li.b5, .navigation li.c5 {
  border-radius: 0px 0px 4px 4px;
  -webkit-transition: 0.2s linear 0s;
  -o-transition: 0.2s linear 0s;
  transition: 0.2s linear 0s;
  background-position:0px 240px;  
}

.navigation:hover li {
  -webkit-transform: perspective(350px) rotateX(0deg);
  -o-transform: perspective(350px) rotateX(0deg);
  transform: perspective(350px) rotateX(0deg);
  -webkit-transition:0.2s linear 0s;
  -o-transition:0.2s linear 0s;
  transition:0.2s linear 0s;
}
.navigation:hover .a2, .navigation:hover .b2, .navigation:hover .c2 {
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.navigation:hover .a3, .navigation:hover .b3, .navigation:hover .c3 {
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.navigation:hover .a4, .navigation:hover .b4, .navigation:hover .c4 {
  transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
.navigation:hover .a5, .navigation:hover .b5, .navigation:hover .c5 {
  -webkit-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div class="container">
<ul class="navigation">
  <a class="main" href="#url">Man of Steel</a>
  <li class="a1"><a href="#"></a></li>
	<li class="a2"><a href="#"></a></li>
	<li class="a3"><a href="#"></a></li>
	<li class="a4"><a href="#"></a></li>
	<li class="a5"><a href="#"></a></li>
</ul>

<ul class="navigation">
  <a class="main" href="#url">Iron Man 3</a>
  <li class="b1"><a href="#"></a></li>
	<li class="b2"><a href="#"></a></li>
	<li class="b3"><a href="#"></a></li>
	<li class="b4"><a href="#"></a></li>
	<li class="b5"><a href="#"></a></li>
</ul>

<ul class="navigation">
  <a class="main" href="#url">Hulk</a>
  <li class="c1"><a href="#"></a></li>
	<li class="c2"><a href="#"></a></li>
	<li class="c3"><a href="#"></a></li>
	<li class="c4"><a href="#"></a></li>
	<li class="c5"><a href="#"></a></li>
</ul>
</div>