1. CSS

.vacc {
	margin: 0 auto;
	width: 206px;
	height: auto;
	background: rgba(0, 0, 0, 0.8);
	border: 3px solid #09F;
	}
.vacc>ul {
	margin: 3px;
	padding: 0;
	list-style: none;
	width: 200px;
	}
.vacc>ul>li {
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
	height: 40px;
	width: 200px;
	background-color: #f0f0f0;
	transition: height 0.5s ease-in-out;
	-moz-transition: height 0.5s ease-in-out;
	-webkit-transition: height 0.5s ease-in-out;
	-o-transition: height 0.5s ease-in-out;
	}
.vacc>ul>li>h3 {
	display: block;
	margin: 0;
	padding: 7px 10px 13px 10px;
	height: 19px;
	font-family: Georgia, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #666;
	font-weight: normal;
	}
.vacc>ul>li>div {
	margin: 0;
	overflow: auto;
	padding: 10px;
	height: 210px;
	}
.vacc>ul>li>div>a {
	display: block;
	text-decoration: none;
	text-align: center;
	margin: 1px;
	padding: 3px;
	color: #000;
	background: #c8c8c8;
	}
.vacc>ul>li>div>a:hover {
	color: #FFF;
	text-shadow: 0px -1px 0px #00518a;
	background: #007fda;
	}
.vacc>ul>li:hover {
	height: 200px;
	}
.vacc>ul>li>h3:hover {
	cursor: pointer;
	}

2. HTML

<div class="vacc">
	<ul>
		<li>
			<h3>» Категория №1</h3>
			<div>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
			</div>
		</li>
		<li>
			<h3>» Категория №2</h3>
			<div>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
			</div>
		</li>
		<li>
			<h3>» Категория №3</h3>
			<div>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
				<a href="#">Ссылка</a>
			</div>
		</li>
	</ul>
</div>

Демо