Hover auf Touchgeräten als Ausklappeffekt?

[Zeppelin]

Hallo zusammen,

ich hätte eine Frage:

Ist ein Ausklappmenü, dass im CSS per a:hover realisiert wird auf mobilen Geräten, also Smartphone, Tablet usw. funktionsfähig?

Wäre für mich die am einfachsten zu realisierende Möglichkeit.

sieht im Code so aus:

<div class="navbutton">
                <a href="index.html">&#9776;</a><br><br><br>
                <a href="index.html">Home</a><br><br>
                <a href="aboutme.html">&Uuml;ber mich</a><br><br>
                <a href="erfolge.html">Erfolge</a><br><br>
                <a href="galerie.html">Galerie</a><br><br>
                <a href="engagement.html">Engagement</a><br><br>
                <a href="partner.html">Partner</a><br><br>
            </div>

Im CSS sind die beiden Variante so:

für die Desktopansicht:

.navbutton {
    visibility: hidden;
}

für die mobile Ansicht:

  .navbutton {
        visibility: visible;
        position: fixed;
        z-index: 10;
        top: 3vh;
        left: 3vw;
        font-size: 15px;
        text-align: center;
        width: 50px;
        height: 30px;
        border-radius: 0.3rem;
        text-decoration: none;
        background-color: #FDFDFD;
        transition: all .8s ease-in-out;
        transition-delay: .05s;
        padding-top: 10px;
        overflow: hidden;
    }

    .navbutton:hover {
        color: #FDFDFD;
        font-size: 20px;
        text-align: center;
        position: fixed;
        float: right;
        width: 170px;
        height: 380px;
        text-decoration: none;
        background-color: #4278b7;
    }

Das das Menüsymbol noch auf index verlinkt ist ein Fehler, aber das wäre auch noch so eine Frage: Lass ich da den Link einfach komplett raus und mach nur das Symbol rein oder einen leeren Link?

Schönen Dank für die Hilfe!