Change Background Color of Single Menu Item

What would be the process for changing the background for a single menu item (.mega-menu > li)

For example, in out mega-menu we have categories and one is a clearance section. We would like to change only the background of that item to a different color.

Would this only be possible through the use of jquery?

Hello,

You can do that by simply using the CSS pseudo-selector ":nth-child" and applying the background property to the .megamenu li you want to change.
If your website is live you can send us link so, i can look at it and provide you with the css code you need to add.

Hope this is useful

Nikola Dragiev

Thank you! Yes it is live: http://www.imprintables.com/

I wanted to change clearance to have a red background.

Hello,

This is the code you need:

.mega-menu > li:nth-child(7):hover{
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff4242), to  #490101));
  background: -webkit-linear-gradient(#ff4242, #490101);
  background: -moz-linear-gradient(#ff4242, #490101);
  background: -ms-linear-gradient(#ff4242, #490101);
  background: -o-linear-gradient(#ff4242, #490101);
  background: linear-gradient(#ff4242, #490101);
  -pie-background: linear-gradient(#ff4242, #490101);
}

Please Go to your nopCommerce installation folder => Plugins => Seven.Spikes.Nop.Plugins.Mega.Menu => Themes/DefaultClean/Content => MegaMenu.css. Then Open the file and paste the code at the bottom.

If you don't like the shades of the red you can change the HEX values in the code.

Hope I've been useful,

Nikola Dregiev
NopTemplatesTeam

This worked. Thank you for all your help!