Problème menu déroulant

Bonjour à tous, dans un premier temps veuillez m'excuser pour les fautes (l'orthographe n'est pasmon fort...)

Je suis très débtant dans le monde du code etla je bloque sur la création d'un menu déroulant, mon sous menu prend les mêmes caractéristiques (niveau déco, gras, bordures ect....) mais j'aimerais que ce soit à part. avez vous une solution à me proposer ?

Je débute vraiment donc pour les pro ça va peut être vous faire mal aux yeux ^^

Merci

<nav class="menu">

                <ul>
                      <li><a href="#"> endroits de promenade</a></li>
                      <li><a href="#histoire">L'histoire des chiens</a></li>

                      <li class="a_sous_class">
                        <a href="#race">races de chiens</a>
                           <ul class="sous_menu">

                                <li><a href="#berger"> chiens de bergers</a></li>
                                <li><a href="#"> chiens d'assistance</a></li>
                                <li><a href="#"> chiens de défence</a></li>
                           </ul>

                        </li>

                       <li><a href="#" >Boutique en ligne</a></li>
                      <li><a href="#contact">contact</a></li>
               </ul>

.menu > ul {
    display: flex;
height: 100%;
width: min-content;
width: auto;
list-style: none;
margin: auto;}

.menu li a{
    display: block; /*a voir pour enlever*/
}
.menu ul li{ display: flex;
            align-items: center;
}
.menu ul li a {font-size: medium;
        padding: 0 20px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: bold;
        transition: all 0.2s ease-in-out;
        display: flex;
}
.menu{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
color: inherit;
z-index: 100;
display: flex;
background-color: white;
}
.sous_menu{
    display: none;
    list-style: none;
    position: absolute;
    top: 60px;
    left: 0;
    background-color: white;
    width: max-content;
}
.a_sous_class:hover .sous_menu{ display: block;
    text-decoration: none;
}
.a_sous_class{
    position: relative;
}
.menu ul li a:visited,
.menu ul li a:link
.menu ul li a:active {color: black;}

.menu ul li a:hover { color: rgb(60, 194, 67);} /* mettre en rouge quand je passe sur les lien hyper texte */

.menu ul li:nth-of-type(2) a {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.menu ul li:nth-of-type(4) a {
    border-left: 1px solid black;
    border-right: 1px solid black;