In my current implementation, it only changes the entire background color and the button of the when hovered over the text (where the button is). If not hovering over the button and instead the div, it only changes the background color of the <div>.

        <div style="width: 25%; font-family: 'Roboto Mono'; font-size: 28px;" class="w3-dropdown-hover w3-hover-green w3-blue">
            <button style="width: 25%" class="w3-button w3-mobile w3-blue w3-hover-green w3-text-yellow">LORE</button>
            <div style="width:25%" class="w3-dropdown-content w3-bar-block">
                <a href="GeneralLorePage.html" class="w3-bar-item w3-button w3-text-yellow w3-blue w3-hover-green">General Lore</a>
            </div>
        </div>

Desired behavior currently only works when hovering over the text/button/LORE, whereas it should work when hovering over the surrounding <div> as well.

Current Behavior

Desired Behavior