JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<div id="hoverme">hover here
<div class="floatck">
	<a title="MenuImages">
		<img alt="Music Department" align="left" src="http://devx.schoolofmusic.ucla.edu/images/templateImages/keyboard-y.png">
		Music Department
	</a>
	<a title="MenuImages">
		<img alt="Jazz" align="left" src="http://devx.schoolofmusic.ucla.edu/images/templateImages/jazz-sax-x.png">
		Jazz
	</a>
	<a title="MenuImages">
		<img alt="World Music" align="left" src="http://devx.schoolofmusic.ucla.edu/images/templateImages/jazz-sax-x.png">
		World Music
	</a>
</div>
        </div>

CSS

#hoverme {
    position:relative;
}
.floatck {
    position:absolute;
    display:none;
}
.floatck a{
    border:8px solid #79482A;
    background:#865709;
    display:block;
    color:#fff;
    font-weight:bold;
    height:45px;
    line-height:45px;
}
.floatck a:not(:first-child){
    border-top:none
}
.floatck img {
    height:100%;
    margin-right:15px;
}

JavaScript

$("#hoverme").hover(function(){
  $(".floatck").stop().slideToggle()  
})