Difficulties with the addition of an accordion

[David Henson]

Here is what I want my accordion to look like on all my pages. Very simple accordion with background table and minimum space between panels as well as a hover effect.

.active, .accordion:hover {
  background-color: #000000;
  color: #d2b48c;
}

The problem is that with a page like this my menu becomes a problem with the accordion in two ways. It adds a space in between each panel which makes using a table look bad by adding too much space, and (oddly enough to me since I suck at this) the hover color of the accordion changes the color of a part of the menu.

I'm having to use black as my accordion color instead of the color I want so it doesn't mess up my menu.

To demonstrate I've created duplicates of my CSS and the page here. Compare the "Bible Data" tab in the menus on both pages.

So, for my accordion I want the spacing like the first link I gave above with the hover color of the accordion different than the menu.

I tried to explain the best I could, and I appreciate any help anyone can give me.

Thanks.