Я сделал dropdown nav через тег button, но как заставить кнопку пропадать dropdown только по нажатию кнопки

let button = document.querySelector('.btn');
let main = document.querySelector('main')
button.onclick = function() {
  main.classList.toggle('transform');
  main.classList.toggle('untransform-menu');
};

body{
	font-family: 'Montserrat', sans-serif !important;
}

.row{
	margin-right: 0 !important;
}

.location-container{
	display: inline;
}

.contacts-container{
	display: flex;
	background-color: #0f0e4d;
	color: white;
	text-align: center;
	padding: 10px 0;
}

.instagram-img{
	background: white;
}

.tel-container, .email-container, .location-container{
	display: flex;
	align-items: flex-end;
}

label{
	margin-bottom: 0px !important;
}

.tel-link{
	text-decoration: none !important;
	color: #419FE1;
	transition: color 0.3s linear;
	margin-left: 8px;
}


.tel-link:hover{
	color: #0048BA;
}

.email-label, .location-label{
	padding-left: 8px;
}

.navbar-default{
	display: flex;
	justify-content: space-between;
	background-color: white !important;
	border: none !important;
}

.logo-site{
	display: flex;
	align-items: center;
	margin-right: 64px;
}

.navbar-nav{
	margin-left: 64px !important;
}

.nav-link{
	color: #3F3E71 !important;
	transition: color 0.3s ease-in-out !important;
}

li{
	position: relative;
}

.nav-link:before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	background-color: #FFDB00;
	width: 0;
	transition: width 0.3s ease-in-out;
}

.nav-link:hover{
	color: #FFDB00 !important;
}

.nav-link:hover:before{
	width: 100%;
}


.background-container{
	background: linear-gradient(rgba(0, 0, 117, 0.7), rgba(0, 0, 117, 0.7)), url('../assets/img/background1.png') center center no-repeat;
	background-size: cover;
}

.label-container{
	padding-top: 128px;
	padding-bottom: 256px;
	text-align: center;
	color: white;
	font-size: 64px;
}

.features{
	position: relative;
}

.feature{
	position: absolute;
	bottom: -140px;
	width: 344px;
	color: white;
	transition: transform 0.5s linear;
}

.feature:hover{
	transform: translateY(-40px);
	cursor: pointer;
}

.feature:first-child{
	background-color: #3877F2;
}

.feature:nth-child(2){
	background-color: #A8C95A;
}

.feature:last-child{
	background-color: #F15B5B;
}

.feature-image-content{
	padding: 32px 16px;
	padding-bottom: 16px;
}

.feature-p-content, .feature-h2-content{
	padding-left: 16px;
}

.feature-p-content{
	font-size: 18px;
}

.strip{
	background: #444 none repeat scroll 0 0;
    display: block;
    height: 3px;
    margin-top: 6px;
    width: 32px;
}

.strip:first-child{
	margin-top: 0px !important;
}

.btn-strip{
	border: 1px solid black !important;
	border-radius: 0px !important;
	padding: 10px !important;
}

main{
	transition: transform 0.3s linear;	
}

.transform{
	transform: translateY(-150px);
}

.untransform-menu{
	transform: translateY(150px);
}


@keyframes down1 {
  0% {
    height: 0;
  }
  10% {
    height: 10px;
  }
  25% {
    height: 25px;
  }
  40% {
    height: 40px;
  }
  50% {
    height: 50px;
  }
  60% {
    height: 60px;
  }
  75% {
    height: 75px;
  }
  80% {
    height: 80px;
  }
  100% {
    height: 100px;
  }
}

.btn-strip:focus ~ .dropdown-menu {
  outline: 1px solid #ccc;
  animation-name: down1;
  animation-duration: 0.3s;
  animation-timing-function: ease-in;
  height: 100px;
  overflow: hidden;
}

.btn-group{
	margin: auto;
}

@media (max-width: 992px){
	.instagram-img{
		visibility: hidden;
	}
	.location-container{
		display: inline-block;
	}
	.tel-container{
		display: inline-block;
	}
	.email-container{
		display: inline-block;
	}

	.contacts-container{
		text-align: left;
	}

	.row .contacts-container{
		text-align: center !important;
	}

}
@media (max-width: 360px){
	.instagram-img{
		visibility: hidden;
	}
	.location-container{
		display: flex;
		align-items: center;
	}
	.tel-container{
		display: flex;
		align-items: center;
	}
	.email-container{
		display: flex;
		align-items: center;
	}

	.contacts-container{
		text-align: left;
	}

	.row .contacts-container{
		text-align: left !important;
	}
}

<!DOCTYPE html>
<html lang="ru">
<head>
	<title>Training Project</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="../css/style.css">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
</head>
<body>
	<header>	
		<nav class="navbar navbar-default container">
			<div class="logo-site">
				<div class="navbar-header">
					<a href="#">
						<img src="../assets/img/logo.png">
					</a>
				</div>
			</div>
			<div class="btn-group">
			  <div class="btn-group">
			    <button type="button" data-toggle="dropdown" class="btn dropdown-toggle btn-strip">
			      <span class="strip"></span>
			      <span class="strip"></span>
			      <span class="strip"></span>
			    </button>
			    <!-- Выпадающее меню -->
			    <ul class="dropdown-menu">
			      <!-- Пункты меню -->
			      <li><a href="#">Пункт 1</a></li>
			      <li><a href="#">Пункт 2</a></li>
			      <li class="divider"></li>
			      <li><a href="#">Пункт 3</a></li>
			    </ul>
			  </div>
			</div>
			<ul class="nav navbar-nav">
				<li><a href="#" class="nav-link">Главная</a></li>
				<li><a href="#" class="nav-link">О школе</a></li>
				<li><a href="#" class="nav-link">Курсы</a></li>
				<li><a href="#" class="nav-link">Вопрос-ответ</a></li>
				<li><a href="#" class="nav-link">Контакты</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<div class="background-container">
			<div class='label-container'>
				<label>BrainIT поможет войти в АйТи</label>
			</div>
			<div class="container">
				<div class="row features">
					<div class="col-md-4 col-xs-12 feature">
						<img src="../assets/img/person.png" class="feature-image-content">
						<h2 class="feature-h2-content">Эффективные методики</h2>
						<p class="feature-p-content">Прогрессивные техники обучения и индивидуальный подход к каждому студенту</p>
					</div>
					<div class="col-md-4 col-xs-12 feature">
						<img src="../assets/img/book.png" class="feature-image-content">
						<h2 class="feature-h2-content">Визуальные материалы</h2>
						<p class="feature-p-content">Интеллект-карты и мнемонические структуры, увеличивающие усвоение информации в разы</p>
					</div>
					<div class="col-md-4 col-xs-12 feature">
						<img src="../assets/img/support.png" class="feature-image-content">
						<h2 class="feature-h2-content">Сопровождение до трудоустройства</h2>
						<p class="feature-p-content">После окончания курса Вас бесплатно будет сопровождать ментор, пока не трудоустроитесь</p>
					</div>
				</div>
			</div>
		</div>
	</main>
	<footer>
	</footer>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
<script type="text/javascript" src="../js/delete.js"></script>
</body>
</html>