How to make drop down box stay during hover?

So I got myself a navigation bar. And when I hover on the certain menus, they show the drop down box like its supposed to. But when I try to hover my mouse over the drop down box, it disappears. It might have something to do with the un-hovering on the menu? Here's the code:

* {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      font-family: sans-serif;
    }

    .navbar {
      background-color: darkgray;
      height: 80px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 3%;
    }

    .logo {
      font-size: ;
    }

    .navbar ul {
      display: flex;
      list-style-type: none;
    }

    .navbar ul li {
      padding: 10px 25px;
      position: relative;
    }

    .navbar ul li a {
      color: black;
      text-decoration: none;
      font-size: 22px;
    }

    .navbar ul li a:hover {
      color: purple;
    }

    /*Drop down boxes CSS*/

    .dropdownda {
      display: none;
    }

    .navbar ul li a:hover + .dropdownda {
      display: block;
      position: absolute;
      left: 0;
      top: 100%;
      background-color: darkgray;
    }

    .navbar ul li a:hover + .dropdownda ul {
      display: block;
      margin: 10px;
      text-align: center;
    }

    .navbar ul li a:hover + .dropdownda ul li {
      width: 180px;
      padding: 10px;
    }

    .dropdownfa {
      display: none;
    }

    .navbar ul li a:hover + .dropdownfa {
      display: block;
      position: absolute;
      left: 0;
      top: 100%;
      background-color: darkgray;
    }

    .navbar ul li a:hover + .dropdownfa ul {
      display: block;
      margin: 10px;
      text-align: center;
    }

    .navbar ul li a:hover + .dropdownfa ul li {
      width: 180px;
      padding: 10px;
    }

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Be Aware - First Response</title>
  </head>
  <body>

    <div class="navbar">
      <h1 class="logo">BE AWARE</h1>
      
      <ul>

        <li>
          <a href="#">Drug Advocacy</a>
          <div class="dropdownda">
            <ul>
              <li><a href="#">Drug Awareness</a></li>
              <li><a href="#">Types of Drugs</a></li>
              <li><a href="#">Abuse and Prevention</a></li>
            </ul>
          </div>
        </li>

        <li>
          <a href="#">First Aid</a>
          <div class="dropdownfa">
            <ul>
              <li><a href="#">Explaining First Aid</a></li>
              <li><a href="#">Purpose of First Aid </a></li>
              <li><a href="#">First Aid Kit</a></li>
            </ul>
          </div>
        </li>

        <li><a href="#">Our Cause</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Logout</a></li>

      </ul>
    </div>

  </body>
</html>

I'm guessing that there's some space in between the menu and the drop down box that by the time I try to put my cursor on the drop down box, it senses that I've un-hovered the menu and puts it back to display: none;

Solution

add :hover setting at 'li' not 'a' tag.

* {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      font-family: sans-serif;
    }

    .navbar {
      background-color: darkgray;
      height: 80px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 3%;
    }

    .logo {
      font-size: ;
    }

    .navbar ul {
      display: flex;
      list-style-type: none;
    }

    .navbar ul li {
      padding: 10px 25px;
      position: relative;
    }

    .navbar ul li a {
      color: black;
      text-decoration: none;
      font-size: 20px;
    }
  
    .navbar ul li :where(.dropdownda, .dropdownfa) ul{
      display: block;
      margin: 10px;
      text-align: center;
    }
    .navbar ul li :where(.dropdownda, .dropdownfa) ul li{
      width: 180px;
      padding: 10px;
    }
    .dropdownda, .dropdownfa {
      display: none;
      position: absolute;
      left: 0;
      top: 100%;
      background-color: darkgray;
    }
    /*Drop down boxes CSS*/    
    .navbar > ul > li:hover > a{
      color: purple;
    }
    .navbar > ul > li:hover :where(.dropdownda, .dropdownfa) {
      display: block;      
    }

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Be Aware - First Response</title>
  </head>
  <body>

    <div class="navbar">
      <h1 class="logo">BE AWARE</h1>      
      <ul>
        <li>
          <a href="#">Drug Advocacy</a>
          <div class="dropdownda">
            <ul>
              <li><a href="#">Drug Awareness</a></li>
              <li><a href="#">Types of Drugs</a></li>
              <li><a href="#">Abuse and Prevention</a></li>
            </ul>
          </div>
        </li>

        <li>
          <a href="#">First Aid</a>
          <div class="dropdownfa">
            <ul>
              <li><a href="#">Explaining First Aid</a></li>
              <li><a href="#">Purpose of First Aid </a></li>
              <li><a href="#">First Aid Kit</a></li>
            </ul>
          </div>
        </li>

        <li><a href="#">Our Cause</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Logout</a></li>

      </ul>
    </div>

  </body>
</html>