CSS menu img

HTML

<!-- preload -->
<img class="hide" src="http://placehold.it/500x250/222/666&text=Welcome"></img>
<img class="hide" src="http://placehold.it/500x250&text=Home"></img>
<img class="hide" src="http://placehold.it/500x250&text=Buying"></img>
<img class="hide" src="http://placehold.it/500x250&text=Renting"></img>
<!-- eof preload -->

<div id="banner">banner
    <div id="menu">
        <a id="mm_btn1" href="a.html">Home<span></span></a><div class="h_banner">a</div>
        <a id="mm_btn2" href="b.html">Buying<span></span></a><div class="h_banner">b</div>
        <a id="mm_btn3" href="c.html">Renting<span></span></a><div class="h_banner">c</div>
    </div>
</div>

CSS

.hide {display:none;}
#banner, .h_banner {
    width            : 500px;
    height           : 250px;
    position         : absolute;
    margin           : 0 auto;
    left             : 0;
    right            : 0;
}
#banner {
    top              : 50px;
    border           : 10px solid #942;    
    background-image : url(http://placehold.it/500x250/222/666&text=Welcome);
}
#menu {
    width            : 500px;
    position         : relative;
    top              : 220px;
    margin           : 0 auto;
    text-align       : center;
}
#menu a {
    position         : relative;
    z-index          : 100;
}
.h_banner {
    opacity          : 0;
    top              : -240px;
    z-index          : 90;
  -webkit-transition : .7s;
          transition : .7s;
}
#mm_btn1:hover + .h_banner {
    opacity          : 0.98;
    background-image : url(http://placehold.it/500x250&text=Home);
}
#mm_btn2:hover + .h_banner {
    opacity          : 0.98;
    background-image : url(http://placehold.it/500x250&text=Buying);
}
#mm_btn3:hover + .h_banner {
    opacity          : 0.98;
    background-image : url(http://placehold.it/500x250&text=Renting);
}


#menu a {
    display           : inline-block;
    padding           : 20px 50px;
    background        : #963;
    width             : 60px;
}
#menu a span {
    display           : none;
}
#menu a:hover span {
    display           : block;
}
#menu a span:after {
    content           : "";
    position          : absolute;
    width             : 0;
    height            : 0;
    border-width      : 30px;
    border-style      : solid;
    border-color      : transparent transparent rgba(153,102,51,.9) transparent;
    top               : -55px;
    margin            : 0 -30px;
}