Menüfokus oder aktiv reagiert nicht wie erwartet

Question

Mit reinem css habe ich ein Menübild, dass wenn: schweben, die Hintergrundfarbe ändert sich wie erwartet. Wenn der Benutzer klickt, öffnet sich ein Popup-Menü und dieses Menübild sollte jetzt aktiv sein. Es bleibt jedoch nicht die Farbe, die benötigt wird, auch wenn mein Styling-Set aktiviert ist: aktiv oder: Fokus.

Bild als beim Hover:

Wenn die Cursor das Bild weg bewegt und zu den Menüpunkten, die Hintergrundfarbe der beabsichtigten Abdeckung nicht bleiben wird. Das Bild:

Mein Code für die HTML und CSS ist:

#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"> 
 
    <a href="https://www.moneyball.ms/">Moneyball Website</a> 
 
    <br> 
 
    <a href="https://www.tools.moneyball.ms/">Moneyball Tool</a> 
 
    <br> 
 
    <a href="https://msit.microsoftstream.com/channel/8a4a7740-855b-4c52-912c-c97fb714a0a6">Moneyball Stream Channel</a> 
 
    <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>

Irgendwelche Ideen dazu? Sehr geschätzt!

Answer 1

Ich schlage vor, es ist, weil das Symbol außerhalb menu_items ist. Sie können so etwas wie dies versuchen:

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>