[CSS] Tło dla elementów listy Opcje

[michal_s]

Mam takie coś:

[HTML] pobierz, plaintext 
<div class="widget">
	<ul class="product-categories">
		<li class="cat-item cat-item-7 cat-parent current-cat-parent"><a href="http://strona.www/odzie/">Odzież </a>
				<ul class="children">
					<li class="cat-item cat-item-13"><a href="http://strona.www/odziez/bluzy-kolorowe-i-biale/">Bluzy białe</a></li>
					<li class="cat-item cat-item-14"><a href="http://strona.www/odziez/bluzy-100-bawelna/">Bluzy 100% bawełna</a></li>
					<li class="cat-item cat-item-22"><a href="http://strona.www/odziez/bluzy-na-trok/">Bluzy na trok</a></li>
					<li class="cat-item cat-item-32"><a href="http://strona.www/odziez/spodnie-kolorowe-i-biale/">Spodnie kolorowe i białe</a></li>
					<li class="cat-item cat-item-68"><a href="http://strona.www/odziez/spodnie-100-bawelna/">Spodnie 100% bawełna</a></li>
					<li class="cat-item cat-item-33 current-cat"><a href="http://strona.www/odziez/spodnie-biale/">Spodnie białe</a></li>
				</ul>
		</li>
			<li class="cat-item cat-item-43"><a href="http://strona.www/fartuch-/">Fartuch </a></li>
			<li class="cat-item cat-item-44"><a href="http://strona.www/fartuch-p/">Fartuch </a></li>
			<li class="cat-item cat-item-8"><a href="http://strona.www/obuwie/">Obuwie </a></li>
	</ul>
</div>
[HTML] pobierz, plaintext 

I chcę żeby po najechaniu na każdy element zmieniał on tło. Robię to tak:

[HTML] pobierz, plaintext 
.widget li:hover {
    background:#002d5e;
}
[HTML] pobierz, plaintext 

Tylko, że wtedy jak mam rozwinięte to menu 'Odzież' to podświetla mi się wszystko włącznie z <ul class="children"> . Jak to obejść, żeby nawet jak będzie to rozwinięte to nie podświetlało mi sie nawet z ul children...

Muszę zmieniać tło li a nie samych linków

Wszystko widać tutaj <a href="https://jsfiddle.net/z93hy4gh/" target="_blank">https://jsfiddle.net/z93hy4gh/</a>

Ten post edytował michal_s 4.12.2015, 00:08:25

[SzpaaQ]

Kod

ul >li :hover{
  background: #002d5e;
}
ul li ul:hover{
  background:none;
}