I'm having trouble with creating a dropdown menu. When I hover over the page, it works fine, but if I hover over the link it doesn't work properly. In short, this drop-down list is behaving opposite to what I want. I need a fix or a better way to create this dropdown menu.
HTML
<body>
<div class="wrap">
<nav class="navbar navbar-default navbar-fixed-top navbarcolor ">
<div class="container ">
<div class="navbar-header active">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand Brand-Color active " href="#">MediQ.ch</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-R-C " href="#">AdminStraion</a>
</li>
<li class="dropdown sub-menu-parent">
<a id="drop" href="#" class="navbar-R-C nav-link dropdown-toggle " data-toggle="dropdown" aria-expanded="false">BookMarker
<span class="caret"></span></a>
<ul id="content" class="dropdown-menu " role="menu">
<li><a class="content " href="#">ACETILXSUBSTANCE2</a>
</li>
<li><a class="content " href="#">HIDROCORTIZOLXBENZTIL</a>
</li>
<li><a class="content " href="#">SUBSTANCE3XSUBSTANCE4</a>
</li>
</ul>
</li>
<li><a class="navbar-R-C " href="#">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</body>
CSS
.navbar-R-C:hover {
color: white !important;
}
.content {
color: White !important;
}
.dropdown-menu {
min-width: 250px;
max-width: 250px;
text-align: center;
background-color: #3E606F;
margin-top: -6px !important;
color: white !important;
border-radius: 15px !important;
}
.dropdown-menu > li > a:hover {
text-align: center;
background-color: #EC407A;
font-weight: bold;
margin-left: 7px !important;
margin-right: 7px !important;
display: inline-block;
color: White;
border-radius: 10px !important;
}
.dropdown-menu:after {
position: absolute;
margin-left: 210px;
top: -6px;
left: -30px;
border-right: 10px solid transparent;
border-bottom: 10px solid #3E606F;
border-left: 10px solid transparent;
content: '';
}
.dropdown:hover .dropdown-menu {
display: block;
}
JavaScript
$(document).ready(function() {
$('.wrap nav ul li').hover(function() {
// Toggles slide but stops if not hovered anymore
$(this).find('ul').stop().slideToggle();
// Toggles on and off the active class (triangle)
$(this).find('div').toggleClass('active');
}
);
}
);