I've been searching for a solution to this problem, but nothing seems to work for me.
In mobile viewports, I have a dropdown menu with styles applied on :hover, which shouldn't be active due to usability reasons.
The structure of the dropdown is similar to the following:
<div className={ styles.dropdownWrapper }>
<span className={ styles.dropdownLabel }>{ label }</span>
<object className={ styles.dropdownArrow }></object>
<div className={ styles.dropdownOptions }>
<div className={ styles.dropdownItem }>
<span>Settings</span>
</div>
<div className={ styles.dropdownItem }>
<span onClick={ () => console.log("logout") }>Logout</span>
</div>
</div>
</div>
Styled as follows:
The code works correctly in Firefox desktop and mobile, as well as Chrome desktop, but not Chrome mobile. The issue seems to be that the :hover effect persists, causing the dropdown items to stay hidden instead of appearing when clicked.
I initially tried a solution from here, but it's no longer supported by Firefox desktop.
My latest attempt was updating the CSS like so:
@media (hover: hover) {
.dropdownWrapper:hover .dropdownOptions {
top: 100%;
display: block;
position: absolute;
padding: 1em 1em 0.5em 1em;
background-color: #36394f;
border-radius: 2px;
min-width: 100px;
}
}
This fixed the issue in Chrome mobile but still doesn't work in Firefox desktop.
If anyone has any helpful advice, it would be greatly appreciated!