I am facing a problem with my sidebar. The issue occurs when I hover over the sidebar slowly, it works correctly. However, when I move the mouse quickly on it, everything gets messed up. How can I resolve this?
This is the HTML code:
<div class="sidebar">
<ul class="insidenav">
<li class="purple">
<a href="" class="link purple"><span>Cloud Scholar</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li><a href="">My Library</a></li>
<li><a target="_blank" href="">User Information</a></li>
<li><a href="">User Profile</a></li>
<li><a href="">Account Details</a></li>
<li><a target="_blank" href="">Change Password</a></li>
<li><a href="">Logout</a></li>
</ul>
</li>
<li class="green">
<a href="" class="link green">
<span>Subject Metadata</span>
</a>
</li>
... (continue with other list items)
</ul>
</div>
Here is the JavaScript code:
jQuery(window).load(function() {
$('ul.insidenav > li').hover(function () {
if ($(this).find('ul.insidenavsubmenu').length > 0) {
$(this).find('ul.insidenavsubmenu').slideDown('1000');
$(this).addClass('arrow-down');
}
},function() {
if ($(this).find('ul.insidenavsubmenu').length > 0) {
$(this).find('ul.insidenavsubmenu').slideUp();
$(this).removeClass('arrow-down');
}
});
});
jQuery(window).load(function() {
$('ul.insidenavsubmenu > li').hover(function() {
if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
$(this).find('ul.dubinsidenavsubmenu').slideDown('1000');
$(this).addClass('arrow-down');
}
},function () {
if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
$(this).find('ul.dubinsidenavsubmenu').slideUp();
$(this).removeClass('arrow-down');
}
});
});
This is the CSS code:
.sidebar {
width: 18.75em;
height: 200px;
padding: 1.875em 0 1.375em 0;
float: right;
display: table;
}
.sidebar ul.insidenav {margin-bottom: 5px;display: inline;}
.sidebar ul.insidenav li.purple {background-color: #9b59b6;}
.sidebar ul.insidenav li.green {background-color: #6fba45;}
... (continue with styling for other list items and submenus)