Hover i tekst z gradientem

Question

Witam, mam problem z elementami li > a w menu, ponieważ każdy z tych elementów ma nałożony gradient na tekst to po usunięciu  -webkit-text-fill-color: transparent;, aby dodać hover nie mogę zmienić koloru linku, jest on cały czas fioletowy, czyli domyślny dla linka.

Dodam, że samo color: #fff; działa, lecz ja chce dodać gradient.

Gdy usunę -webkit-text-fill-color: transparent; działa hover, ale nie działa gradient samego tekstu, a gdy zostawię ten zapis to nie działa hover, ale sam gradient działa.

HTML:

		<nav>
			<ul>
				<li><a href="#" class="menu-item-1 font-color-1">Home</a></li>
				<li><a href="#" class="menu-item-2 font-color-1">Forum</a></li>
				<li><a href="#" class="menu-item-2 font-color-1">Register</a></li>
				<li><a href="#" class="menu-item-2 font-color-1">Support</a></li>

				<li><a href="#" class="menu-item-3 font-color-2"><span class="font-color-3">Download</span><br>Client 1,2 GB</a></li>

				<li><a href="#" class="menu-item-4 font-color-1">ItemShop</a></li>
				<li><a href="#" class="menu-item-4 font-color-1">Rankings</a></li>
				<li><a href="#" class="menu-item-4 font-color-1">Contact</a></li>
				<li><a href="#" class="menu-item-5 font-color-1">Events</a></li>
			</ul>	
		</nav>

CSS:

nav{
	background: url(img/menu.png);
	width: 1063px;
	height: 84px;
	margin: auto;
}

ul{
	margin: 0;
	padding: 0;
	display: block;
	width: 900px;
	height: 48px;
	margin: auto;
	list-style-type: none;
}

.font-color-1{
	background-image: -webkit-gradient(linear,
		left top, left bottom,
		from(#c2b59b),
		to(#817762));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 44px;
	text-decoration: none;
}

.font-color-1:hover{
	background-image: -webkit-gradient(linear
		left top, left bottom,
		from(#cfbf9e),
		to(#c2b59b));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.font-color-2{
	color: #a9af79;
	text-decoration: none;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 10px;
	line-height: 16px;
	padding-top: 3px;
}

.font-color-3{
	color: #111304;
	font-size: 12px;
}

.menu-item-1
{
	display: block;
	width: 76px;
	height: 46px;
	text-align: center;
	float: left;
}

.menu-item-2
{
	display: block;
	width: 94px;
	height: 46px;
	text-align: center;
	float: left;
}

.menu-item-3
{
	display: block;
	width: 186px;
	height: 46px;
	text-align: center;
	float: left;
}

.menu-item-4{
	display: block;
	width: 94px;
	height: 46px;
	text-align: center;
	float: left;
}

.menu-item-5{
	display: block;
	width: 70px;
	height: 46px;
	text-align: center;
	float: left;
}

Answer 1

Z góry dziękuje za pomoc.