Menu

[TeixeiraRamos 4]

Por favor, não estou conseguindo criar um "submenu" onde eu coloquei um comentário no código (<!--Aqui gostaria de criar um submenu dentro da item Santos --> ) 

<div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="index.php">Index</a>
                </li>

                <!-- Dropdown -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                        Deus
                    </a>
                    <div class="dropdown-menu" id="navbardrop">
                        <a class="dropdown-item" href="santossolenidadesfestas.php">Santos</a>
					
					<!--Aqui gostaria de criar um submenu dentro da item Santos -->	    				
						
						<a class="dropdown-item" href="missalcotidianoedominical.php">Missal</a>
                        <a class="dropdown-item" href="santoterco.php">Santo Terço</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                        Mundo
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="fome.php">Fome</a>
                        <a class="dropdown-item" href="continentes.php">Continentes</a>
                        <a class="dropdown-item" href="paises.php">Paises</a>
                    </div>
                </li>
            </ul>
          <div class="mt-2 mt-md-0">
                <div id='google_translate_element'>
                    <script>
                        function googleTranslateElementInit() {
                            new google.translate.TranslateElement({
                                pageLanguage: 'pt',
                                autoDisplay: 'true',
                                layout: google.translate.TranslateElement.InlineLayout.VERTICAL
                            }, 'google_translate_element');
                        }
                    </script>
                    <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
                </div>
            </div>
		</div>	
    </nav>
</header>

Obrigado

[Omar~ 87]

Entre com outra <ul> e os itens do sub-menu usando <li> dentro dessa nova ul.

No resto é só usar o css ou javascript para obter o resultado final (ocultar/mostrar ou sempre visível).

[TeixeiraRamos 4]

Omar obrigado pela sua atenção, mas não consegui. 

Por favor, observe que coloquei o comentário no lugar do sub-menu conforme sugeriu.

 

<!-- Links -->
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="index.php">Index</a>
                </li>

                <!-- Dropdown -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                        Deus
                    </a>
                    <div class="dropdown-menu" id="navbardrop">
                        <a class="dropdown-item" href="santossolenidadesfestas.php">Santos</a>
					
					<!-- Entre com outra <ul> e os itens do sub-menu usando <li> dentro dessa nova ul.

No resto é só usar o css ou javascript para obter o resultado final (ocultar/mostrar ou sempre visível).  --> 
						<ul class="navbar-nav mr-auto">
							<li class="nav-item">
								<a class="nav-link" href="consultasantosecelebracoes.php">Pesquisa Santo e Celebrações</a>
							</li>
						</ul>	
									    				
						
						<a class="dropdown-item" href="missalcotidianoedominical.php">Missal</a>
                        <a class="dropdown-item" href="santoterco.php">Santo Terço</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                        Mundo
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="fome.php">Fome</a>
                        <a class="dropdown-item" href="continentes.php">Continentes</a>
                        <a class="dropdown-item" href="paises.php">Paises</a>
                    </div>
                </li>
            </ul>
          <div class="mt-2 mt-md-0">
                <div id='google_translate_element'>
                    <script>
                        function googleTranslateElementInit() {
                            new google.translate.TranslateElement({
                                pageLanguage: 'pt',
                                autoDisplay: 'true',
                                layout: google.translate.TranslateElement.InlineLayout.VERTICAL
                            }, 'google_translate_element');
                        }
                    </script>
                    <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
                </div>
            </div>
		</div>	
    </nav>
</header>

O resultado é um espaço em em branco.