Dropdown is not working when clicking on it

Question

Hi I tried and insert a dropdown in my web page, but when I tried to click, it's not showing the div below and taking to my main page I tried some different code with html and css also used javascript reference of w3schools but didn't work. please help me in this issue.

Snippet

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("del-menu-item");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

    #catering .container {
        text-align: left;
        box-sizing: border-box;
    }
    #catering .deliver {
        border-bottom: 1px solid #d6dbdf;
        margin: 0 20px;
    }
    #catering .delivery-menu {
        display: block;
        position: relative;
        width: 100%;
        padding: 36px 52px 28px 0;
        font-family: "DINCondensedBold", Verdana, Arial, sans-serif;
        text-transform: uppercase;
        font-weight: normal;
        font-size: 30px;
        letter-spacing: 0.05em;
        color: #253037;
        text-decoration: none !important;
    }
    #catering .del-menu-item {
        display: block;
        position: relative;
        width: 100%;
        padding: 28px;
        min-height: 135px;
        border-top: 1px solid #d6dbdf;
    }
    #catering .del-menu-item h3 {
        font-size: 30px;
        margin-bottom: 0;
        padding-right: 200px;
    }
    #catering .del-menu-item p {
        padding-right: 200px;
    }
    #catering .del-menu-item .pull-right {
        position: absolute;
        top: 20px;
        right: 0;
    }
    #catering .del-menu-item .added-item {
        display: none;
        margin-top: 35px;
        padding: 30px;
        background: #d6dbdf;
    }
    #catering .del-menu-item .added-item .remove {
        display: block;
        float: right;
        width: 32px;
        height: 32px;
        line-height: 30px;
        text-align: center;
        color: #253037;
        border: 1px solid #253037;
        border-radius: 99px;
        font-family: times;
        text-decoration: none !important;
    }

<section id="catering">
    <div class="container" style="display: block;">
    <div class="deliver">
        <a onclick = "myFunction()" class="delivery-menu" href="#">Main</a>
        <div class="del-menu-con" style="display: none;">
            <div id = "myDropdown" class="del-menu-item">
                <h3>Lobster Roll (380 cal) <span>$17</span></h3>
                <p>¼ lb of lobster atop a buttered, toasted New-England style split-top bun with a swipe of mayo, a sprinkle of lemon butter and a dash of our secret spices.</p>
                <div class="pull-right">
                    Qty<br>
                    <input type="text"><a class="add">Add</a>
                </div>
                <div class="added-item">
                    <span></span> <a class="remove" href="#">&times;</a>
                </div>
            </div>
        </div>
    </div>
    <div class="deliver">
        <a onclick = "myFunction()" class="delivery-menu" href="#">Soup</a>
        <div class="del-menu-con" style="display: none;">
            <div id = "myDropdown" class="del-menu-item">
                <h3>Lobster Roll (380 cal) <span>$17</span></h3>
                <p>¼ lb of lobster atop a buttered, toasted New-England style split-top bun with a swipe of mayo, a sprinkle of lemon butter and a dash of our secret spices.</p>
                <div class="pull-right">
                    Qty<br>
                    <input type="text"><a class="add">Add</a>
                </div>
                <div class="added-item">
                    <span></span> <a class="remove" href="#">&times;</a>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

You have a couple issues. The following script....

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

... as you can see is attempting to toggle an element with the id myDropdown

Problem 1:

You have multiple items with the id myDropdown. Items should never share an ID. Use classes for that, and unique id's for elements.

Problem 2:

The myDropdown element you are trying to target, isn't the hidden element. It's parent is. #myDropdown which has class del-menu-item is display:block in your css. Your inline style on it's parent is what's hiding it at the moment. So your toggle (if your IDs are repaired) would be toggling an element inside a hidden element. You'd never see it.

<div class="del-menu-con" style="display: none;">
    <div id = "myDropdown" class="del-menu-item">
    ...
    </div>
</div>

Problem 3:

You are attempting to toggle a class 'show' on these elements. That class does not exist in your CSS. Your menu simply isn't showing because it has that inline style of display:none on it's parent. So even with 1 and 2 repaired it won't work because the class .show does nothing.

Solution:

Repair your code so you have unique IDs.

Restructure your elements so that either your actual dropdown div is the hidden element or change your javascript to toggle the parent element that is hidden

Add the proper classes for .show to your CSS.