Duvida Menu Navbar Bootstrap

Front-end
,
#1

Boa noite…

Estou desenvolvendo um site de Reiki https://reikicuritiba.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.

O menu que tem o dropdown “Terapeutas” e “Terapias” quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
nao acontece nada… segue o trecho do codigo do menu…

<div class="collapse navbar-collapse" id="navbarsExample09">
			<ul class="navbar-nav ml-auto">
			  <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>
			  <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>
			  <li class="nav-item dropdown1">
					<a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>
					<ul class="dropdown-menu">
						<li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>
						<li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>
					</ul>
					
			  </li>
			  <li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>
					<ul class="dropdown-menu" aria-labelledby="dropdown01">
						<li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>
						<li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>
						<li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>
						<li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>
						<li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>
						<li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>
					</ul>
			  </li>
			  <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>
			   <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>
			</ul>
		</div>

Obrigado
Att
Julio Cezar

#2

Você só postou o HTML que é estático e sem estilo por natureza (ou melhor assume o estilo básico e padrão do navegador). Faltou postar a carga de CSS que você está utilizando. Qual é a versão do Bootstrap?

#3 
ul.dropdown-menu {
  background: #151515;
  border-radius: 0px;
  margin: 0px;
  padding: 0px;
}

texto em negrito

ul.dropdown-menu > li > a, .navbar ul ul ul.dropdown-menu li .nav-link {
  font-size: 12px;
  line-height: 22px;
  display: block;
  position: relative;
  z-index: 1;
  padding-left: 15px;
  transition: all .3s ease-in-out;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #27243e;
  color: #fff;
  text-transform: uppercase;
}

ul.dropdown-menu > li > a:hover, .navbar ul ul ul.dropdown-menu li .nav-link:hover {
  color: green;
}

.dropdown-item:focus, .dropdown-item:hover {
  color: #fff;
  text-decoration: none;
  background-color: transparent;
}

.dropdown-menu {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -o-border-radius: 0;
  -ms-border-radius: 0;
  padding: 0;
  border: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  min-width: 210px;
  transform: scaleY(0);
  -webkit-transform: scaleY(0);
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -o-transform: scaleY(0);
  transform-origin: center top 0;
  -webkit-transform-origin: center top 0;
  -moz-transform-origin: center top 0;
  -ms-transform-origin: center top 0;
  -o-transform-origin: center top 0;
  transition: all .3s ease-in-out 0s;
  -webkit-transition: all .3s ease-in-out 0s;
  -moz-transition: all .3s ease-in-out 0s;
  -ms-transition: all .3s ease-in-out 0s;
  -o-transition: all .3s ease-in-out 0s;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -ms-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scaleY(1);
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -o-transform: scaleY(1);
}

Segue o CSS

https://mandalatantra.com.br/
https://cristaispuroencanto.com.br/

#4

Você está expandindo o dropdown via hover, então ele só recolhe quando retira o mouse de cima. O padrão é o dropdown escondido (hidden)

.dropdown-menu {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -o-border-radius: 0;
  -ms-border-radius: 0;
  padding: 0;
  border: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  [...];
}

Mas quando passa o mouse por cima (hover) ele fica visível:

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scaleY(1);
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -o-transform: scaleY(1);
}
#5

Isso mesmo… mas esse comportamento é no PC… no mobile você precisa clicar no menu pra ele expandir.

Tem como deixar esse hover pra versão PC e tirar na versão mobile?