Background for <li> elements - child elements

Question

I have menu like here https://jsfiddle.net/z93hy4gh/ .

.widget li:hover {
    background:#002d5e;
}

<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>

I want to set background for hover elements. But I don't know how to set it for child elements. How can I use .cat-parent or .current-cat-parent class to fix it?

Answer 1

You can use css :not() to prevent .cat-parent.

$(document).ready(
  function() {
    $('.cat-parent').click(
      function(event) {
        event.preventDefault();
        $(this).toggleClass('opened');
      });
  });

.widget li:not(.opened):hover {
  background: #002d5e;
}
.children {
  display: none;
}
.opened .children {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

Answer 2

I am guessing a bit about what you want, but perhaps if you set the background color on the a elements, you can highlight each link without affecting a nested blocks of li's.

I am assuming that you want to highlight the link text for each link in the lists.

.widget .children li {
  background-color: yellow; /* demo only... */
  display: block;
}
.widget .children li:hover {
  background: pink;
}
.widget .product-categories > li:hover:not(:first-child) {
  background-color: lightgreen;
}
.widget .product-categories > li:first-child a:hover {
  background-color: lightgreen;
  display: block;
}

<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>