Navbar toggle does not display the my navlinks when I click on it

I am new to programming. This is actually my first attempt at creating a website. So I decided to create a dropdown for the two of the navlinks, which are about us and programs. Before I did that, the toggle bar was working properly when I am on a small screen. However, after adding the dropdown the toggle bar no longer displays the links. Kindly, help me resolve this. Thank you.

This is my code:

<!DOCTYPE html>

<html lang="en">

<head>
    <title>MW Ghana</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/index.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body id="myPage">

    <nav class="navbar navbar-default navbar-fixed-top">

        <div class="container">

          <div class="navbar-header">

            <button class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>

            <a href="index.html">
              <img class="navbar-brand" src="/images/mw.png" alt="mw logo">
            </a>
          </div>

          <div class="collapse navbar-collapse" id="nav">
            <ul class="nav navbar-nav navbar-right">
              <li><a class="nav-link" href="#ABOUT-US">ABOUT US</a>
                <div id="sub-nav">
                  <ul>
                    <li><a class="sub-navlink" href="">OUR STORY</a></li>
                    <li><a class="sub-navlink" href="">OUR BOARD</a></li>
                    <li><a class="sub-navlink" href="">OUR PARTNERS</a></li>
                  </ul>  
                </div>
              </li>

              <li><a class="nav-link" href="#ABOUT-US">PROGRAMS</a>
                <div id="sub-nav">
                  <ul>
                    <li><a class="sub-navlink" href="">MENTORING WALK</a></li>
                    <li><a class="sub-navlink" href="">CONVERSATIONS</a></li>
                    <li><a class="sub-navlink" href="">NEXT LEVEL</a></li>
                    <li><a class="sub-navlink" href="">WoW GIRLS</a></li>
                  </ul>  
                </div>
              </li>

              <li><a class="nav-link" href="">TESTIMONIALS</a></li>
              <li><a class="nav-link" href="">CONTACT</a></li>
              <li><a class="nav-link donate" href="">DONATE</a></li>
            </ul>
          </div>

        </div>

    </nav>
<style>
.navbar {
  background-color: rgb(241, 241, 241);
  border: 0;
  line-height: 1.42857143 !important;
  letter-spacing: 4px;
  border-radius: 0;
  z-index: 9999;
}

a.nav-link {
  color: #068092 !important;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 1px;
}

a.donate {
  color: red !important;
}

.nav {
  padding-top: 4rem;
}

.navbar-default,
.navbar-toggle {
  border-color: transparent;
  color: #fff !important;
  margin-top: 1rem;
}

.navbar-toggle {
  margin-top: 4rem;
}

#sub-nav ul{
  position: relative;
  top: -10px;
  left: -25px;
}

#nav li{  
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 30px;
  padding-left: 0;
  text-decoration: none;
  font-weight: bold;
}

#nav ul ul li{
  display:none;
}

.sub-navlink {
color: black;
}

#nav li:hover ul li{
  display:block;
}
</style>
</body>
</html>