How to make :hover more mobile friendly and accessible?

Question

I'm using SCSS to make a dropdown menu. Here is an excerpt of how it works:

li {
    font: bold 12px/18px sans-serif;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 15px 20px;
    background: $menuBG;
    color: $menuColor;
    cursor: pointer;
    transition: all 0.2s;
    &:hover {
        background: $hoverBG;
        color: $hoverColor;
    }

Now what I'd really like is for it to do the same thing while still allowing it to work for those without a mouse (people with accessibility clients and mobile phones.) Using jQuery is not impossible but not preferred.

Answer 1

First of all, I do not recommend using dropdown menus for anything that's intended to be used on touch (so nowhere, really). But if you want to try to make it work anyway, you could try:

• Use JS to open the menu on touchstart and close it on touchstart outside the menu
• Use both :hover and :focus so the menu will open when clicked on (CSS only)
• Or for a more reliable but much trickier CSS-only solution, you could try maybe anchor elements with ::after pseudo elements and the :active and + selectors -- which will be quite tricky