Display & Hide a Navbar submenu

I’m trying to make a navbar with a submenu for each link. The easiest way to do this that I found is to write some Javascript that when the link is clicked changes the classes of the submenu (from display none to display block). I tried to write the script but it doesn’t work at all. I can’t find out where the problem is.

const SM_prossimieventi = () => {
  const sottomenu = document.querySelector('.prossimieventi_items');
  const linkpe = document.querySelector('.prossimieventi_a');
  linkpe.addEventListener('click', () => {
    sottomenu.classList.toggle('.pe-active');
  });
};

SM_prossimieventi();
        <nav class="main-nav">
            <ul class="main-nav_items">
                <li class="main-nav_item"> <a href="" class="main-nav_item_a home_a">HOME</a></li>
                <li class="main-nav_item"> <a href="" class="main-nav_item_a prossimieventi_a">PROSSIMI EVENTI</a></a>
                    <ul class="prossimieventi_items">
                        <li class="prossimieventi_item"><a href="">GIORNATA ECOLOGICA</a></li>
                        <li class="prossimieventi_item"><a href="">CONCORSO FOTOGRAFICO</a></li>
                        <li class="prossimieventi_item"><a href="">LOTTERIA</a></li>
                        <li class="prossimieventi_item"><a href="">FESTA ASSUNTA</a></li>
                    </ul>
                </li>

                <li class="main-nav_item"> <a href="" class="main-nav_item_a mappainterattiva_a">MAPPA INTERATTIVA</a>
                    <ul class="mappainterattiva_items">
                        <li class="mappainterattiva_item"><a href="">COSA VISITARE</a></li>
                        <li class="mappainterattiva_item"><a href="">DOVE MANGIARE</a></li>
                        <li class="mappainterattiva_item"><a href="">DOVE DORMIRE</a></li>
                    </ul>
                </li>
                <li class="main-nav_item"> <a href="" class="main-nav_item_a attivitàsulterritorio_a">ATTIVITA' SUL
                        TERRITORIO</a> </a>
                    <ul class="attivitàsulterritorio_items">
                        <li class="attivitàsulterritorio_item"><a href="">FERRAGOSTO</a></li>
                        <li class="attivitàsulterritorio_item"><a href="">IL NATALE</a></li>
                        <li class="attivitàsulterritorio_item"><a href="">PROGETTO AIUOLE</a></li>
                        <li class="attivitàsulterritorio_item"><a href="">BLOG</a></li>
                        <li class="attivitàsulterritorio_item"><a href="">DONAZIONI</a></li>
                    </ul>
                </li>
                <li class="main-nav_item"><a href="" class="main-nav_item_a chisiamo_a">CHI SIAMO</a></a>
                    <ul class="chisiamo_items">
                        <li class="chisiamo_item"><a href="">LA STORIA</a></li>
                        <li class="chisiamo_item"><a href="">CONTATTACI</a></li>
                        <li class="chisiamo_item"><a href="">BILANCIO</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
.mappainterattiva_items,
.prossimieventi_items,
.attivitàsulterritorio_items,
.chisiamo_items {
  position: absolute;
  list-style: none;
  padding: 1rem;
  margin: 1rem 0rem 0rem 1rem;
  background: #1679a7;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0.1em;
  font-weight: 275;
  width: max-content;
  display: none;
}
.main-nav_item {
  position: relative;
}
.mappainterattiva_item a,
.prossimieventi_item a,
.attivitàsulterritorio_item a,
.chisiamo_item a {
  text-decoration: none;
}
.mappainterattiva_item a:hover,
.prossimieventi_item a:hover,
.attivitàsulterritorio_item a:hover,
.chisiamo_item a:hover {
  text-decoration: none;
  color: #cccc32;
}

.pe-active{
  display: block;
}