Help with conflicting CSS

Hello, everyone. Thanks for providing this forum.

I need to know if anyone can help me with a problem I’m having with my website. It’s a hobby of mine and I’m just learning CSS and HTML. My CSS for my accordion and menu seems to be interfering with one another, I want to change the spacing on my accordion so the panels are closer together and the hover background on the accordion panels is different than the background on my menu dropdown tab body is different but can’t seem to figure it out.

Here’s the code for each:

/*----------------------------*\
	MENU
\*----------------------------*/

.nav-menu {
  position: relative;
  text-align: center;
  float: none;
}

.nav-menu>li {
  float: none;
  display: inline-block;
}

.nav-menu>li>a {
  display: block;
  padding: 25px 15px;
  line-height: 20px;
  font-weight: normal;
  text-transform: none;
}

/*----------------------------*\
	DROPDOWN
\*----------------------------*/

.nav-menu li.has-dropdown {
  background: #000000;
  position: relative;
}

.nav-menu li.has-dropdown>a:after {
  font-family: 'FontAwesome';
  content: "\f0d7";
  margin-left: 5px;
}

.nav-menu li.has-dropdown>.dropdown {
  position: absolute;
  left: 0;
  width: 200px;
  text-align: left;
  z-index: 60;
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.nav-menu li.has-dropdown:hover>.dropdown {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
  visibility: visible;
}

.nav-menu li.has-dropdown>.dropdown .dropdown-body {
  background-color: #000000;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #7aa3c3;
}

.dropdown .dropdown-list li {
  border-bottom: 1px solid #7aa3c3;
}

.dropdown .dropdown-list li a {
  display: block;
  padding: 10px;
  line-height: 20px;
}

.dropdown .dropdown-heading {
  text-transform: none;
  font-size: 20px;
  margin-top: 0px;
  margin-bottom: 10px;
  line-height: 30px;
}

/*----------------------------*\
	MEGA DROPDOWN
\*----------------------------*/

.nav-menu li.has-dropdown.megamenu {
  background: #000000;
  position: static;
}

.nav-menu li.has-dropdown.megamenu>.dropdown {
  width: 100%;
}

.nav-menu li.has-dropdown.megamenu>.dropdown .dropdown-body {
  padding: 30px;
}

.nav-menu li.has-dropdown.megamenu>.dropdown .dropdown-list {
  margin-bottom: 30px;
}

.nav-menu li.has-dropdown.megamenu>.dropdown .dropdown-list li a {
  padding-left: 0px;
  padding-right: 0px;
}

/*----------------------------*\
	TAB DROPDOWN
\*----------------------------*/

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-content {
  background: #000000;
  z-index: 60;
  position: relative;
  margin-left: -31px;
}

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav {
 background: #000000;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 60;
}

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li {
  background: #000000;
  border-bottom: 1px solid #7aa3c3;
  border-top: 1px solid #7aa3c3;
}

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li a {
  background: #202020;
  display: block;
  padding: 31px;
  color: #d9c09f;
  font-weight: normal;
  font-size: 12px;
  text-transform: none;
}

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li.active {
  background: #202020;
}

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li.active a {
  background: #000000;
  color: #d9c09f;
}

/*=========================================================
	ACCORDION
===========================================================*/
.accordion {
  background-color: #d2b48c;
  color: #000000;
  font-weight: bold;
  font-family: Genos;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 22px;
  transition: 0.4s;
  -webkit-box-shadow: 0px 0px 0px 3px #66605b inset;
  box-shadow: 0px 0px 0px 3px #66605b inset;
}

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

.accordion:after {
  content: '\002B';
  color: #ffffff;
  font-weight: bold;
  float: right;
  margin-left: 5px;

}

.panel {
  padding: 0 18px;
  background-color: #000000;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  -webkit-box-shadow: 0px 0px 0px 2px #000000 inset;
  box-shadow: 0px 0px 0px 2px #000000 inset;
}

It may be a simple solution but I have no idea how to implement it. Thanks for any help you can offer, I really appreciate it.

What happened? Did I stump ya?