Background colour on a class changing on hover?

Hi David,

If you have a moment, please could you tell me what I am missing with my table of contents code? It's working pretty much, except for reasons unknown to me, the hover on the title is shifting the colour from green to grey (when it should just be changing the opacity of the green):
https://reclaimdesign-383226.easywp.com/faq/

I can't see where the grey is coming from at all:

.collapsible {
  	background-color: #539c22;
	border: 0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
  	color: #ffffff;
  	cursor: pointer;
	font-family: 'Carrois Gothic', sans-serif;
	font-size: 20px;
	/*line-height: 30px;*/
	line-height: 1.3em;
	outline: none;
	padding: 20px;
	text-align: left;
	text-transform: uppercase;
	transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
  	-o-transition: opacity 0.3s ease-in-out;
  	-webkit-backface-visibility: hidden;
	-webkit-transition: opacity 0.3s ease-in-out;
  	width: 100%;	
}

.collapsible:hover {
	opacity: 0.7 !important;
}

.collapsible:after {
  	color: #ffffff;
	content: '\002B';
	/*font-size: 30px;*/
	font-size: 36px;
  	float: right;
  	margin-left: 5px;
}

.active:after {
  	content: "\2212";
}

ul.content {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom: 1px solid #d0d0d0;
	border-left: 1px solid #d0d0d0;
	border-right: 1px solid #d0d0d0;
	border-top: 0;
	box-shadow: 0 0 0;
	margin: 0;
  	max-height: 0;
  	overflow: hidden;
	padding: 0 20px;
	text-align: left;
  	transition: max-height 0.3s ease-out;
}

li.toc {
	list-style: square;
	margin-left: 15px;
	padding: 10px 0 0 10px;	
}

ul li.toc:last-child {
    padding-bottom: 10px;
}