Two functions interfering with each other

Question

So my first hit in web development is going pretty well. However ... I want to have two separate drop-down menus, but the JavaScript functions interfere with each other ... That is, if both functions are active at the same time, clicking on one snapshot will cause the other to decrease responsiveness or stop working. This is probably something stupid, but I have little time. here is the code:

//Control sliding menu on screens smaller than a specified breakpoint.
(function(menu_button, links, breakpoint) 
{
    "use strict";
    var menulink = document.getElementById(menu_button),
    menu = document.getElementById(links);

    menu.className = "start";
    setTimeout(function() 
    {
        menu.className = "collapsed";
    }, 20);

    menuLink.onclick = function() 
    {
        if (menu.className === "displayed") 
        {
            menu.className = "collapsed";
        } 
        else 
        {
            menu.className = "displayed";
        }
        return false;
    };

    window.onresize = function() 
    {
        if (window.innerWidth < breakpoint) 
        {
            menu.className = "collapsed";
        }
    };  
})("menuLink", "navLinks", 700);

It was function number 1, here is No.2:

function dropFunction() 
{
    "use strict";
    document.getElementById("myDropdown").classList.toggle("drop");
}

window.onclick = function(e) 
{
    "use strict";
    if (!e.target.matches('.dropbtn')) 
    {

        var dropdowns = document.getElementsByClassName("dropdownContent");
        for (var d = 0; d < dropdowns.length; d++) 
        {
            var openDropdown = dropdowns[d];
            if (openDropdown.classList.contains("drop")) 
            {
                openDropdown.classList.remove("drop");
            }
        }
    }
}

and HTML, if at all useful:

<nav>
    <p id="menuLink"><a href="#navLinks">MENU</a></p>
    <ul class="displayed" id="navLinks">
        <li><a href="index.html">Home</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="shop.html">Shop</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

<div class="dropdownContent" id="myDropdown">
    <a href="#"><img class="externalLink" src="images/faceBook.png" style="width:20px"></a>
    <a href="#"><img class="externalLink" src="images/linkedIn.png" style="width:20px"></a>
    <a href="#"><img class="externalLink" src="images/soundCloud.png" style="width:20px"></a>
</div>

and CSS:

.nav
{
    display: inline;
    position: absolute;
    bottom: 220px;
    padding-right: 60px;
    width: 100%;
    background-color: transparent;
    font-family: "verdana";
    font-size: 20px;
    text-align: center;
}

.nav li
{
    display: inline;
}

.nav a
{
    display: inline-block;
    padding: 50px;
    text-decoration: none;
    color: #E4E4E4;
}

.nav a:hover
{
    color: #FFFFFF;
    text-shadow: 0px 0px 15px #FFFFFF;
}

.nav a:active
{
    color: #5B4CA8;
}

li.drops
{
    display: inline-block;
}

.dropdownContent 
{
    display: none;
    position: absolute;
    background-color: transparent;
    box-shadow: none;
    minimum-width: 20px;
}

.dropdownContent a 
{
    color: transparent;
    text-decoration: none;
    display: block;
    text-align: center;
}

.drop
{
    display: block;
}

#menuLink 
{
    width: 100%;
    background-color: transparent;
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

#menuLink a
{
    text-decoration: none;
    font-family: "helvetica";
    color: #E4E4E4;
}

#menuLink a:hover
{
    color: #FFFFFF;
    text-shadow: 0px 0px 15px #FFFFFF;
}

#menuLink a:active
{
   color: #5B4CA8;
}

#navLinks
{
    position: absolute;
    list-style-type: none;
    width: 100%;
    background-color: transparent;
    padding: 0;
    margin: 0;
    text-align: center;
    z-index: 1;
    opacity: 1;
    -webkit-transition: all ease-out 0.5s;
    transition: all ease-out 0.5s;
}

#navLinks a
{
    display: block;
    padding: 10px;
    font-family: "helvetica";
    color: #E4E4E4;
    text-decoration: none;
    font-size: 18px;
}

#navLinks a:hover
{
    color: #FFFFFF;
    text-shadow: 0px 0px 15px #FFFFFF;
}

#navLinks a:active
{
    color: #5B4CA8;
}

#navLinks.start
{
    display: none;
}

#navLinks.collapsed
{
    top: -12em;
    opacity: 0;
}

Thank you for your help!

Answer 1

window.Onlcick , - "drop". , - , JavaScript , JavaScript.