<div class="k84proapomenu2">
  <div class="point1" alt="">
  <div class="underpoint under3">
  <a href="#"><img src="/images/file_document_paper_green_g38856.png" /></a>
  <a href="#"><img src="/images/file_document_paper_green_g11853.png" /></a>
  <a href="#"><img src="/images/file_document_paper_green_g9959.png" /></a>
  <a href="#"><img src="/images/file_document_paper_green_g21731.png" /></a>
  </div>
  </div>
  <div class="point2">
  <div class="underpoint under1">
  <a href="#"><img src="/images/file_document_paper_red_g14302.png" /></a>
  </div>
  </div>
  <div class="point3">
  <div class="underpoint under2">
  <a href="#"><img src="/images/file_document_paper_orange_g21455.png" /></a>
  <a href="#"><img src="/images/file_document_paper_orange_g18390.png" style="margin-left:15px;" /></a>
  </div>
  </div>
</div>

<script>
// Креативное меню by k84pro & Apocalypse
$('.k84proapomenu2 .point2').hover(function() {
  $('.k84proapomenu2 .point3').css('margin-top', '-74px');
}, function() {
  $('.k84proapomenu2 .point3').css('margin-top', '-72px');
});
// apo-ucoz.com (c) 2013
</script>

.k84proapomenu2 {
  height:100px;
  width:auto;
}

.k84proapomenu2 * {
  transition:all .3s ease;-o-transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;
}

.k84proapomenu2 div[class^="point"] img:hover {
  opacity:1 !important;
}

.underpoint {
  position:absolute;
  width:50px;
  height:50px;
  margin-left:25px;
  margin-top:15px;
  cursor:pointer;
}

.underpoint img {
  opacity:0.5;
  width:50px;
  height:50px;
}

.under1 img {
  margin-top:15px;
  margin-left:5px;
}

.under2 {
  margin-top:28px;
  margin-left:50px;
  width:250px;
}

.under3 {
  margin-top:20px;
  margin-left:30px;
  width:350px;
}

.under3 img {
  margin:0px 10px;
}

.k84proapomenu2 .point1 {
  width:450px;
  height:80px;
  background: rgb(252,134,83); /* Old browsers */
  background: -moz-linear-gradient(left, rgba(252,134,83,1) 8%, rgba(247,125,76,1) 35%, rgba(234,94,46,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(8%,rgba(252,134,83,1)), color-stop(35%,rgba(247,125,76,1)), color-stop(100%,rgba(234,94,46,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(252,134,83,1) 8%,rgba(247,125,76,1) 35%,rgba(234,94,46,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(252,134,83,1) 8%,rgba(247,125,76,1) 35%,rgba(234,94,46,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(252,134,83,1) 8%,rgba(247,125,76,1) 35%,rgba(234,94,46,1) 100%); /* IE10+ */
  background: linear-gradient(to right, rgba(252,134,83,1) 8%,rgba(247,125,76,1) 35%,rgba(234,94,46,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc8653', endColorstr='#ea5e2e',GradientType=1 ); /* IE6-9 */
}

.k84proapomenu2 .point2 {
  width:140px;
  height:90px;
  background:url('/images/k84apo2.png') repeat-x;
  position: absolute;
  margin-top: -80px;
  margin-left: 351px;
  z-index:1;
}

.k84proapomenu2 .point2:hover {
  background:url('/images/k84apo2u.png') repeat-x;
  position: absolute;
  margin-top: -83px;
}

.k84proapomenu2 .point3 {
  width:275px;
  height:90px;
  background:url('/images/k84apo3.png') repeat-x;
  position: absolute;
  margin-top: -72px;
  margin-left: 428px;
  z-index: 2;
}

.k84proapomenu2 .point3:hover {
  background:url('/images/k84apo3u.png') repeat-x;
  margin-top:-76px !important;
}