My dropdown menu in navbar is not working

I am creating a dropdown menu in my navigation bar but when I click on it, nothing happens(used the dropdown code from w3schools website). I have tried everything I could but it doesn’t solve my problem.

this is what my navbar looks like:

here’s my html code:

     <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "About", "Home")</li>
                    @*<li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        <li>@Html.DropDownList("Services","ALL")</li>*@
                    <li>
                        <div class="My_dropdown">
                            <button class="My_dropbtn" onclick="myFunction()">
                                Services
                                <i class="glyphicon glyphicon-chevron-down glyph-pad"></i>
                            </button>
                            <div class="My_dropdown-content" id="myDropdown">
                                <a href="#">service1</a>
                                <a href="#">service2</a>
                                <a href="#">service3</a>
                            </div>

                        </div>
                    </li>

                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="@Url.Action("SignUp","Account")"><Span class="glyphicon glyphicon-user"></Span> Sign Up </a></li>

                    <li><a href="@Url.Action("Login","Account")"><Span class="glyphicon glyphicon-log-in"></Span> Login </a></li>
                </ul>
            </div>

this is what CSS looks like:

    .navbar-inverse .navbar-nav > li > a {
    color: black;
}

    .navbar-inverse .navbar-nav > li > a:hover, .My_dropdown:hover .My_dropbtn, .My_dropbtn:focus {
        background-color: #8080ff;
        color: white;
    }
   .glyph-pad {
    left: -4px;
    top: 4px;
   }
   .My_dropdown {
    float: left;
    overflow: hidden;
   }

    .My_dropdown .My_dropbtn {
        cursor: pointer;
        font-size: 1em;
        border: none;
        outline: none;
        color: black;
        padding: 13px 12px;
        background-color: inherit;
        font-family: inherit; /* Important for vertical align on mobile phones */
        margin: 0px;
    }

   .My_dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    }

    .My_dropdown-content > a {
        float: none;
        color: black;
        padding : 13px 12px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
        .My_dropdown-content > a:hover {
            background-color: #8080ff;
        }

   .My_dropdown:hover .My_dropdown-content {
     display: block;
   }

   .show {
    display: block;
   }

this is my JavaScript file

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

// Close the dropdown if the user clicks outside of it
window.onclick = function (e) {
    if (!e.target.matches('.My_dropbtn')) {
        var myDropdown = document.getElementById("myDropdown");
        if (myDropdown.classList.contains('show')) {
            myDropdown.classList.remove('show');
        }
    }
}

this is how I rendered my scripts:

  @Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/MyScripts")
@Scripts.Render("~/bundles/bootstrap")

@RenderSection("scripts", required: false)

I don’t know what I am doing wrong. Please Help