Menu focus or active not responding as expected - html

Question

Using pure css, I have a menu image that when :hover, the background-color changes as expected. When the user clicks, a menu pop out opens and so now, that initial menu image should be active. However, it is not staying the color needed even with my styling set for :active or :focus.
Image as when hover:
When the cursor moves off that image and to the menu items, that background-color does not stay the intended cover. That image:
My code for the html and css is:
#menu {
position: relative;
}
#menu_img:hover,
#menu_img:active,
#menu_img:focus {
background-color: #008272;
cursor: pointer;
}
#menu_items {
position: absolute;
top: 0%;
opacity: 0;
transition: all 0.5s;
display: none;
background-color: #002F33;
color: #ffffff;
height: 600px;
width: 18%;
z-index: 2;
left: 0px;
}
#menu_items > a {
font-size: 18px;
color: #ffffff;
margin-top: 15px;
margin-bottom: 15px;
padding-left: 20px;
}
#menu_items > a:hover {
text-decoration: none;
}
#menu_items.menu_items_toggle {
opacity: 1;
top: 100%;
display: inline-block;
}
<div id="menu" style="background-color: #002F33; height:50px;">
<span id="span_img_container" class="navIcon" style="width: 50px;"><img id="menu_img" src="assets/images/icon_hamburger.png"></span>
<div id="menu_items">
Moneyball Website
<br>
Moneyball Tool
<br>
Moneyball Stream Channel
<br>
</div>
<span style="color: #ffffff; font-size: 22px; padding-left:15px; padding-top: 26px; position: relative; top: 5px; left: -5px;">Moneyball Tool</span>>
</div>
Any ideas on this? Much appreciated!

Answer 1

I suggest it's because the icon is outside menu_items. You can try something like this:
nav {
background: #333;
color: white;
min-height: 2.75em;
position: relative;
}
nav h1 {
line-height: 2.75rem;
margin: 0 0 0 3.5rem;
}
nav menu {
line-height: 2.75;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 2.75em;
}
nav menu:before {
box-shadow: 11px 0 0 -10px rgba(255, 255, 255, 0.6);
content: "☰";
display: block;
line-height: 2.75;
text-align: center;
transition: backround-color 200ms;
width: 2.75em;
}
nav menu li {
background: #333;
list-style: none;
max-height: 0;
overflow: hidden;
padding: 0 1em;
transition: max-height 200ms;
}
nav menu li:hover {
background-color: black;
}
nav menu:hover {
width: auto;
}
nav menu:hover:before {
background-color: green;
box-shadow: none;
}
nav menu:hover li {
max-height: 2.75em;
}
<nav>
<menu>
<li>
<a>First menu link</a>
</li>
<li>
<a>Second menu link</a>
</li>
<li>
<a>Third menu link</a>
</li>
<li>
<a>Fourth menu link</a>
</li>
</menu>
<h1>Page title</h1>
</nav>