css ile :hover özelliğini kullanarak javascript kullanmadan da yapılabilir.

ör :
CSS :
.menu { position: relative; font-family: Arial; }
.menu .icon { text-align: center; height: 30px; width: 30px; line-height: 30px; background: #F1F1F1; border: 1px solid #DDD; box-sizing: border-box; font-size: 20px; text-shadow: 0px 1px #FFF; }
.menu .sub { display: none; width: 120px; position: absolute; top: 29px; border: 1px solid #DDD; padding: 10px; line-height: 25px; font-size: 11px; }
.menu .sub a { display: block; border-bottom: 1px dashed #EEE; text-decoration: none; }
.menu .sub a:last-child { border-bottom: 0px; }
.menu:hover .sub { display: block; }
HTML :
<div class="menu">
	<div class="icon">#</div>
	<div class="sub">
		<a href="">Submenu 1</a>
		<a href="">Submenu 2</a>
		<a href="">Submenu 3</a>
		<a href="">Submenu 4</a>
	</div>
</div>