Выпадающее меню css

HTML

<div id="demo">
	<div class="wrapper">
		<div class="content">
			<ul>
				<a href="#"><li>Меню1</li></a>
				<a href="#"><li>Меню2</li></a>
				<a href="#"><li>Меню3</li></a>
				<a href="#"><li>Меню4</li></a>
			</ul>
		</div>
		<div class="parent">Выпадающее меню 1</div>
	</div>
	
	<div class="wrapper">
		<div class="content">
			<ul>
				<a href="#"><li>Меню1</li></a>
				<a href="#"><li>Меню2</li></a>
				<a href="#"><li>Меню3</li></a>
				<a href="#"><li>Меню4</li></a>
			</ul>
		</div>
		<div class="parent">Выпадающее меню 2</div>
	</div>
	
	<div class="wrapper">
		<div class="content">
			<ul>
				<a href="#"><li>Меню1</li></a>
				<a href="#"><li>Меню2</li></a>
				<a href="#"><li>Меню3</li></a>
				<a href="#"><li>Меню4</li></a>
			</ul>
		</div>
		<div class="parent">Выпадающее меню 3</div>
	</div>
</div>

CSS

#demo {
        margin: 30px 0 50px 0;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
	
#demo .wrapper {
		display: inline-block;
		width: 180px;
		margin: 0 10px 0 0;
		height: 20px;
		position: relative;
}
	
#demo .parent {
		height: 100%;
		width: 100%;
		display: block;
		cursor: pointer;
		line-height: 30px;
		height: 30px;
		border-radius: 5px;
		background: #F9F9F9;
		border: 1px solid #AAA;
		border-bottom: 1px solid #777;
		color: #282D31;
		font-weight: bold;
		z-index: 2;
		position: relative;
		-webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
		-webkit-transition-delay: .8s;
		text-align: center;
}
#demo .parent:hover,с#demo .content:hover ~ .parent {
		background: #fff;
		-webkit-transition-delay: 0s, 0s, 0s;
}
	
#demo .content:hover ~ .parent {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		z-index: 0;
	}
	
#demo .content {
		position: absolute;
		top: 0;
		display: block;
		z-index: 1;
		height: 0;
		width: 180px;
		padding-top: 30px;
		-webkit-transition: height .5s ease;
		-webkit-transition-delay: .4s;
		border: 1px solid #777;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
	
#demo .wrapper:active .content {
		height: 123px;
		z-index: 3;
		-webkit-transition-delay: 0s;
}
	
#demo .content:hover {
		height: 123px;
		z-index: 3;
		-webkit-transition-delay: 0s;
}
	
	
#demo .content ul {
		background: #fff;
		margin: 0;
		padding: 0;
		overflow: hidden;
		height: 100%;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
}
	
#demo .content ul a {
		text-decoration: none;
}
	
#demo .content li:hover {
		background: #eee;
		color: #333;
}
	
#demo .content li {
		list-style: none;
		text-align: left;
		color: #888;
		font-size: 14px;
		line-height: 30px;
		height: 30px;
		padding-left: 10px;
		border-top: 1px solid #ccc;
}
	
#demo .content li:last-of-type {
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
}