Correct your selectors .dropdown-menu
:
$(document).ready(function () {
$('#someAction').hover(function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
});
You missed class selector dots in .find()
function;
UPDATE: Second part
Well, This may be your problem now: When you leave the button, dropdown fades out, so you cannot select any option.
That's because your hover selector is #someAction
. Change it to .dropdown-menu
and #someAction
parent:
$(document).ready(function () {
$('.btn-group').hover(function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
});
as well as this works:
$(document).ready(function () {
$('.Menu').hover(function () {
....
Don't forget to fadeOut .dorpdown-menu
on an option click.
$('.dropdown-menu li a').click(function(){
$(this).parents('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
})