выпадающее подменю в javascript

Question

надеюсь, что мой вопрос будет ясным

При нажатии на уникальную кнопку, которую я имею на этой странице, я хочу отобразить меню, имеющее только три элемента.

меню пункт «Языки» оборачивает подменю, в котором я хочу, чтобы отобразить только если пользователь нажимает на «Languages»

однако на данный момент, когда я нажимаю на кнопку, а не только меню появляется, но и подменю; и это не то, что я хочу иметь.

не могли бы вы сообщить мне, что не так с моим кодом, пожалуйста?

enter image description here

Код:

function myFunction2() { 
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
function myFunction3() { 
 
    document.getElementById("languageslist").classList.toggle("show"); 
 

 
}

.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    border: 1px solid black; 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdownb { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.show { 
 
    display: block; 
 
}

<div class="dropdown"> 
 
    <button id="btn" onclick="myFunction2()">Show</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <p>Countries</p> 
 
    <p id="btnl" onclick="myFunction3()">Languages</p> 
 
    <div id="languageslist"> 
 
     <a href="">English</a> 
 
     <a href="">Spanish</a> 
 
     <a href="">German</a> 
 
    </div> 
 
    <p>Continents</p> 
 
    </div> 
 
</div>

Answer 1

Это потому, что вы не скрывая submenu на начальном этапе.

Добавить класс в languagelist & скрыть его. По щелчку его переключить класс

HTML

<div id = "languageslist" class="hide"> // add a class here 
     <a href="">English</a> 
     <a href="">Spanish</a> 
     <a href="">German</a> 
     </div> 

JS

function myFunction3() { 
    document.getElementById("languageslist").classList.toggle("hide"); 
    document.getElementById("languageslist").classList.toggle("show"); 
} 

JSFIDDLE