black box behind menu when hover over

Hi Dacian,

I was able to find the background color in Chrome by right clicking on the menu item and then selecting ‘Inspect Element.’ Then by choosing the :hover pseudo selector I was able to make the css appear.

ul.menu > li:hover {
  background-color: #363636;
  color: #ffffff;
}

If you get rid of that line of code, the black box will disappear. You can either directly edit the theme, or use a plugin like Simple Custom CSS and add this line to override it.

ul.menu > li:hover {
  background-color: transparent !important;
}

As for the dark menu buttons, it is a bit more complicated, but similar. It uses a CSS3 gradient, and you’ll just have to find and edit the following line:

.menu a:hover {
  background-color: #808080;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#808080), to(#363636));
  background-image: -webkit-linear-gradient(top, #808080, #363636);
  background-image: -moz-linear-gradient(top, #808080, #363636);
  background-image: -ms-linear-gradient(top, #808080, #363636);
  background-image: -o-linear-gradient(top, #808080, #363636);
  background-image: linear-gradient(top, #808080, #363636);
  color: #ffffff;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#808080, endColorstr=#363636);
}

Make sure to change all the colors, to maintain the gradient on all browsers. You can use a flat color to simplify if you like. You could also use an online generator to make the code for you.

Hope this helps!

Thanks this worked. And the link to the online generator help a lot.