I've created a sidebar using jQuery, but I'm facing an issue. When I hover my mouse quickly on the sidebar and then move to the "red" area, the 3rd item should open a submenu, but it doesn't. How can I fix this?
Here's my jsfiddle with CSS, but it doesn't seem to work properly over there!
I am using my own CSS and jQuery version 1.11.0.
jQuery(window).load(function() {
$('ul.insidenav > li').hover(function(e) {
if ($(this).find('ul.insidenavsubmenu').length > 0) {
$(this).find('ul.insidenavsubmenu').stop(true).slideDown('1000');
$(this).addClass('arrow-down');
}
}, function() {
if ($(this).find('ul.insidenavsubmenu').length > 0) {
$(this).find('ul.insidenavsubmenu').stop(true).slideUp();
$(this).removeClass('arrow-down');
}
});
});
jQuery(window).load(function() {
$('ul.insidenavsubmenu > li').hover(function(e) {
if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
$(this).find('ul.dubinsidenavsubmenu').stop(true).slideDown('1000');
$(this).addClass('arrow-down');
}
}, function() {
if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
$(this).find('ul.dubinsidenavsubmenu').stop(true).slideUp();
$(this).removeClass('arrow-down');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="sidebar">
<ul class="insidenav">
<li class="purple">
<a href="" class="link purple"><span>ابر پژوهیار</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li><a href="">کتابخانه من</a></li>
<li><a target="_blank" href="">اطلاعات کاربر</a></li>
<li><a href="">مشخصات کاربر</a></li>
<li><a href="">اطلاعات حساب</a></li>
<li><a target="_blank" href="">تغیر کلمه عبور</a></li>
<li><a href="">خروج</a></li>
</ul>
</li>
... <!-- Other list items -->
<li class="darkbrown">
<a class="link darkbrown"><span>سفارشیسازی</span></a>
<ul class="insidenavsubmenu">
<li><a href="">درج شیوهنامه در نرمافزار</a></li>
<li><a href="">حمایت از وبگاهها</a></li>
<li><a href="">درج کتابخانه موضوعی</a></li>
</ul>
</li>
</ul>
</div>
</body>