JSFiddle - React, Tailwind, and code Playground

HTML

<div class="k84proapomenu2">
    <div class="point1" alt="">
        <div class="underpoint under3">
            <a href="#"><img src="http://www.iconsearch.ru/uploads/icons/paper/128x128/file_document_paper_green_g38856.png" /></a>
            <a href="#"><img src="http://www.iconsearch.ru/uploads/icons/paper/128x128/file_document_paper_green_g11853.png" /></a>
             <a href="#"><img src="http://www.iconsearch.ru/uploads/icons/paper/128x128/file_document_paper_green_g9959.png" /></a>
            <a href="#"><img src="http://www.iconsearch.ru/uploads/icons/paper/128x128/file_document_paper_green_g21731.png" /></a>
        </div>
    </div>
    <div class="point2">
        <div class="underpoint under1">
            <a href="#"><img src="http://www.iconsearch.ru/uploads/icons/paper/128x128/file_document_paper_red_g14302.png" /></a>
        </div>
    </div>
    <div class="point3">
        <div class="underpoint under2">
            <a href="#"><img src="http://www.iconsearch.ru/uploads/icons/paper/128x128/file_document_paper_orange_g21455.png" /></a>
            <a href="#"><img src="http://www.iconsearch.ru/uploads/icons/paper/128x128/file_document_paper_orange_g18390.png" style="margin-left:15px;" /></a>
        </div>
    </div>
</div>

CSS

.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('http://www.apo-ucoz.com/images/bb/k84apo2.png') repeat-x;
    position: absolute;
    margin-top:...

JavaScript

// Креативное меню 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