Remove hover background style on Ubermenu item

Question

I have an image (logo to be precise) as the first item in Ubermenu (a popular Wordpress plugin). When I hover over this image present in the Ubermenu, the background color of the 'li' containing the image changes.

The HTML is this:

 <ul id="megaUber" class="megaMenu">
   <li id="menu-item-34157" class="xyz-header-logo menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home ss-nav-menu-item-0 ss-nav-menu-item-depth-0 ss-nav-menu-reg um-flyout-align-center ss-nav-menu-with-img ss-nav-menu-notext">
      <a href="http://example.com/"><img class="um-img um-img-noresize" width="16" height="16" src="http://example.com/wp-content/uploads/abc.png" alt="Cat"></a>
   </li>
   <li>
       ... other menu items ....
   </li>
    .
    .
    .
</ul>

If I add a simple CSS rule 'background:none' via inspect element of the browser in:

#megaMenu .ss-nav-menu-with-img.ss-nav-menu-notext > a > img, #megaMenu .ss-nav-menu-with-img.ss-nav-menu-notext > span.um-anchoremulator > img {
background:none;
    }

The background color gets removed completely (even without hover) for all the menu items, which is not desired.

Now my question is, what CSS rule can I use to specifically target the 'li' or the image present inside the 'li' to remove the background color on hover (other menu items should not get affected)?

The 'li' as shown in the code above has an id of menu-item-34157.

I have already unsuccessfully tried this to remove the background on hover:

    #menu-item-34157, #menu-item-34157:hover, #menu-item-34157:visited, #menu-item-34157:link, #menu-item-34157:active {
    background:none !important;
}

Any help would be genuinely appreciated.

Answer 1

Do this, this should work.

ul.megaMenu li:first-child a:hover {background: none !important;}