Navigation Link Drop-Down Menus

Preview

All you need to edit is the following area:

const subLinks = {
    Members: [`<a href="">Test</a>`, `<a href="">Test 2</a>`],
    Search: [`<a href="https://www.google.com/">Google</a>`, `<a href="https://www.yahoo.com/">Yahoo</a>`]
};

Members and Search represent the name of the navigation link you want to append a drop-down menu to, and the HTML can be edited to include the links you want to add to the drop-down menu. Repeat a line and edit to add a drop-down menu. Include a comma after every array except for the last one.

Admin CP → Themes → Board Templates → Head

<style>
a.nav-link:hover {
    display: inline;
}

a.nav-link:hover ul {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    margin-top: .75rem;
    margin-left: -1.30rem !important;
}

a.nav-link li.panel {
    margin: 0 !important;
    border-width: 1px;
}

a.nav-link li.panel:not(:last-child) {
    border-bottom-width: 0;
}

a.nav-link a {
    font-weight: 400;
    display: block;
    padding: .75rem 1.25rem;
}
</style>

Admin CP → Themes → Board Templates → Below the board

<script>
const subLinks = {
    Members: [`<a href="">Test</a>`, `<a href="">Test 2</a>`],
    Search: [`<a href="https://www.google.com/">Google</a>`, `<a href="https://www.yahoo.com/">Yahoo</a>`]
};
const navLinks = document.querySelectorAll('a.nav-link');

if (navLinks) {
    const keys = Object.keys(subLinks);

navLinks.forEach(element => {
    for (const i of keys) {
        if (element.innerText === i) {
            const ul = document.createElement('ul');
            ul.style.display = 'none';
            element.appendChild(ul);

            for (const key of subLinks[i]) {
                const li = document.createElement('li');
                li.className = 'panel';
                li.innerHTML = key;
                element.querySelector('ul').appendChild(li);
            }
        }
    }
});
}
</script>