ul > li {
	opacity:1;
	position: relative;

	-webkit-transition: opacity 0.2s ease-in-out 0s;
	-moz-transition: opacity 0.2s ease-in-out 0s;
	transition: opacity 0.2s ease-in-out 0s;
}

ul > li:before {
	content: "";
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 1px;
	z-index: 0;
	background-color: #505050;

	-webkit-transform: scaleX(0);
	-moz-transform: scaleX(0);
    transform: scaleX(0);

	-webkit-transition: all 0.2s ease-in-out 0s;
	-moz-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s;
}

ul > li:hover {
	opacity: 1;
}

ul > li:hover:before {
	-webkit-transform: scaleX(.9);
	-moz-transform: scaleX(.9);
	transform: scaleX(.9);
}