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