Responsive Menu

with arrows

HTML

<div id="Media_Choices">
    <div class="media_choice" id="Video" >
		<h2>Video</h2>
		<ul>
			<li>item1</li>
			<li>item2</li>
			<li>item3</li>
			<li>item4</li>
		</ul>
	</div>
    <div id="Pictures" class="media_choice"> <h2>Pictures</h2> </div>
    <div id="Audio" class="media_choice"> <h2>Audio</h2> </div>
    <div id="Stories" class="media_choice"> <h2>Stories</h2> </div>
</div>

CSS

body
{
	font: 12px/18px Arial;
	padding: 10px;
}
#Media_Choices
{
    width: 100%;
}
.media_choice
{
    float: left;
    width: 24.5%;
    max-height: 38px;
    height: 38px;
    text-align: center;
	border: 1px solid black;
	cursor: pointer;
	box-sizing: border-box;
}
.media_choice:hover
{
	background: Silver;
}
.media_choice > h2
{
	position: relative;
	margin: 0;
	padding: 0;
	line-height: 38px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-right: 20px;
}
.media_choice > h2:after
{
	content: '▼';
  align-content:right;
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
	height: 38px;
	width: 15px;
	line-height: 38px;
	text-align: left;
}
.media_choice.dropped > h2:after
{
	content: '▲';
}
.media_choice > ul
{
	display: none;
	margin: 0;
	padding: 0;
	border: 1px solid black;
}
.media_choice.dropped > ul
{
	display: block;
}
.media_choice > ul > li
{
	padding: 5px 6px;
}
.media_choice > ul > li:hover
{
	padding: 5px 6px;
	background: Silver;
}

JavaScript

$(document).ready (function()
{
	$('.media_choice').on ('click', function()
	{
		$(this).toggleClass ('dropped');
	});
});