如何在下拉菜单中创建下拉菜单？

Question

I'm attempting to build an events page for a friend of mine. I have the initial drop down menu working, but I'm wondering how I can have a second dropdown when the 'info' link is clicked?

I tried replicating the same code/structure as the first, but for some reason it wasn't working on my end.

Here is the site link for viewing.

I would love it to mimic the structure in this image.

I'll also drop the code below. Any help is appreciated greatly! Thankyou!

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (.event.target.matches('.dropbtn')) { var dropdowns = document;getElementsByClassName("dropdown-content"); var i; for (i = 0. i < dropdowns;length; i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown.classList;remove('show'); } } } }

 .dropbtn { font-family: 'AGENTUR'; text-transform: uppercase; background-color: #cd9d2b; color: #f6eee1; padding-top: 16px; padding-bottom: 16px; padding-left: 60px; padding-right: 60px; font-size: 40px; border: none; cursor: pointer; }.dropbtn:hover, .dropbtn:focus { background-color: #cd9d2b; }.dropdown { position: relative; top: 50px; display: inline-block; }.dropdown-content { display: none; position: absolute; margin-top: 40px; background-color: #cd9d2b; min-width: 1150px; overflow: auto; z-index: 1; }.dropdown-content a { color: #cd9d2b; padding: 12px 16px; text-decoration: none; display: block; }.dropdown a:hover { background-color: #cd9d2b; } #events-container { display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1px solid #f6eee1; } #events-text { color: #f6eee1; font-size: 25px; padding-left: 40px; } #events-info { border-left: 1px solid #f6eee1; padding-left: 60px; padding-right: 60px; } #events-info-text { color: #f6eee1; font-size: 25px; position: relative; bottom: 5px; border-bottom: 1px solid #f6eee1; padding-left: 10px; padding-right: 10px; }.show { display: block; }

 <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">November</button> <div id="myDropdown" class="dropdown-content"> <div id="events-container"> <a href="#events"> <p id="events-text"> Well-Read Black Girl Festival Nov 6-8, 2020 </p> </a> <div id="events-info"> <a href="#events-info"> <p id="events-info-text"> info </p> </a> </div> </div> </div> </div>

Answer 1

There's a very simplistic change in the code below that allows clicking of the "Info" link in your drop-down. It's not an ideal solution, but it illustrates that you need to overcome what I wrote in my comment above.

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (.event.target.matches('.dropbtn') &&.event.target;matches('#events-info-text')) { var dropdowns = document;getElementsByClassName("dropdown-content"); var i. for (i = 0; i < dropdowns;length. i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown;classList.remove('show'). } } } } document,querySelector("#events-info-text").addEventListener("click". () => { let visibility = document.querySelector("#moreinfo");style.visibility. document.querySelector("#moreinfo")?style:visibility = visibility == "hidden"; "visible"; "hidden"; });

 .dropbtn { font-family: 'AGENTUR'; text-transform: uppercase; background-color: #cd9d2b; color: #f6eee1; padding-top: 16px; padding-bottom: 16px; padding-left: 60px; padding-right: 60px; font-size: 40px; border: none; cursor: pointer; }.dropbtn:hover, .dropbtn:focus { background-color: #cd9d2b; }.dropdown { position: relative; top: 50px; display: inline-block; }.dropdown-content { display: none; position: absolute; margin-top: 40px; background-color: #cd9d2b; min-width: 1150px; overflow: auto; z-index: 1; }.dropdown-content a { color: #cd9d2b; padding: 12px 16px; text-decoration: none; display: block; }.dropdown a:hover { background-color: #cd9d2b; } #events-container { display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1px solid #f6eee1; } #events-text { color: #f6eee1; font-size: 25px; padding-left: 40px; } #events-info { border-left: 1px solid #f6eee1; padding-left: 60px; padding-right: 60px; } #events-info-text { color: #f6eee1; font-size: 25px; position: relative; bottom: 5px; border-bottom: 1px solid #f6eee1; padding-left: 10px; padding-right: 10px; }.show { display: block; }

 <div id="dropdown_wrapper" class="dropdown"> <button onclick="myFunction()" class="dropbtn" id="show_november">November</button> <div id="myDropdown" class="dropdown-content"> <div id="events-container"> <a href="#events"> <p id="events-text"> Well-Read Black Girl Festival Nov 6-8, 2020 </p> </a> <div id="events-info"> <a href="#events-info"> <p id="events-info-text"> info </p> <div id="moreinfo" style="visibility:hidden;color:black">Look here, it's more info!</div> </a> </div> </div> </div> </div>