menu with left bg

by Vladislav Altyncev

HTML

<div id="menu">
		<ul>
			<li><a class="active" href="#">О фестивале</a></li>
			<li><a href="#">Положение</a></li>
			<li><a href="#">Номинации</a></li>
			<li><a href="#">фотоотчет</a></li>
			<li><a href="#">Заявка</a></li>
			<li><a href="#">голосование</a></li>
			<li><a href="#">результаты</a></li>
			<li><a href="#">контакты</a></li>
		</ul>
	</div>

CSS

#menu {
	position: relative;
	margin-bottom: 40px;
	overflow: hidden;
}
#menu ul {
	list-style: none;
	width: 900px;
	margin: 0 auto;
}
#menu ul:before {
    content: '';
    position: absolute;
    width: 50%;
	height: 48px;
	left: 0;
    background: #68acb3;
}
#menu li {
	float: left;
	margin: 0;
	background: #68acb3;
	position: relative;
	z-index: 1;
}
#menu a {
	display: block;
	font-family: 'pf_dindisplay_probold';
	font-size: 14px;
	color: #aff7ff;
	text-transform: uppercase;
	padding: 15px 10px;
}
#menu a.active {color: #FFF; text-decoration: none;}