Bug élément sticky

Bonjour,

Je rencontre un petit problème avec mon code.

Ce que je fais

Je cherche à faire une navbar en display grid avec sous menu caché.

Le code HTML:

<div class="navbar"> 
        <div class="accueil">
            <a href="index.php">Accueil</a>
        </div>

        <div class="cours">
            <a href="cours.php">Les cours</a>
                <div class="sub-menu">
                    <div>
                        <a href="html-css.php">HTML/CSS</a>
                    </div>
                    <div>
                        <a href="php.php">PHP</a>
                    </div>
                    <div>
                        <a href="js.php">JS</a>
                    </div>
                </div>
        </div>

        <div class="cv">
            <a href="cv.php">Mon parcours</a>
        </div>

    </div>

Le code CSS

.navbar {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 75%;
    margin: auto;
    text-align: center;
    text-decoration: none;
    position: sticky;
    top:0;
  }

.accueil{
    grid-row: 1;
    grid-column: 1/3;
    grid-column-end: 2;
    background-color: blueviolet;
  }

.cours{
    grid-row: 1;
    grid-column: 2/3;
    background-color: brown;
  }

.cv {
    grid-row: 1;
    grid-column: 3/3;
    background-color: yellowgreen;
  }

.sub-menu { 
    background-color: lightcoral;
    position: absolute;
    visibility: hidden;
    text-align: left;
    width: 33.33%;
    opacity: 0;
    transform: translateY(-2em);
    z-index: -1;
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.cours:focus .sub-menu,
.cours:focus-within .sub-menu,
.cours:hover .sub-menu {
    visibility: visible;
    background-color: lightcoral;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
 }

.navbar :hover{
    background-color: white;
}

.accueil a{
    display: block;
}

.cours a{
    display: block;
}

.cv a{
    display: block;
}

.sub-menu a{
    display: block;
}

Ce que je veux

Je cherche à supprimer cette artefact (cf ce que j'obtiens)

Ce que j'obtiens

La navbar fonctionne, mais j'ai un bug sur lorsque l'utilisateur zoom sur la page à 125% et 175% j'ai un artefact qui fait que la navbar n'est pas totalement à 0 en top.

https://www.casimages.com/i/210221125949554237.png.html