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!