Thanks very much. I’ve now got the fade out effect (achieved as you described in number 1 above) although I am having some difficulty with the box effect.

I found in screen.css the following:

.s_item:hover {
  z-index: 10;
  padding: 20px !important;
  background: #fff;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

So I copied this and tried to do the similar for the categories by adding at the end of the s_subcategory rules:

.s_subcategories:hover {
 z-index: 10;
  padding: 20px !important;
  background: #fff;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

However this makes a box around all the categories on that page and not just the one I’m hovering over (although the fade effect is still working as should be). I tried changing my code to .s_subcategories ul li:hover but that didn’t fix it.

• This reply was modified 4396 days ago by  mallo82.
• This reply was modified 4396 days ago by  mallo82.

Perfect! Thank you very much!

Almost all there now!