drop down menu on hover not working

Question

I have a dropdown menu so when a user hover overs to that button he should get lists of option without clicking it. This is my dropdown menu:

<div class="Menu"">
    <div class="btn-group">
        <button type="button" id="someAction" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Select Action
  <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a class="add">Add</a></li>
            <li><a class="remove">Remove</a></li>
        </ul>
    </div>
</div>

This is my hoverover code but for some reason its not working.

$(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);
    });
}); });

forgot to mention on click i should be able to select that option

Answer 1

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);
})

Answer 2

Your code is invalid. there is no .dropdown-menu in button.Use:

 $('#someAction').hover(function () {
    $('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  },function(){
     $('.dropdown-menu').stop(true, true).delay(200).fadeOut(500)
 ;})

Working Fiddle

Answer 3

Get the dropdown with Class selector ('.dropdown-menu')

Answer 4

You have 2 little mistakes and 1 error:

1st mistake on the HTML double quotes:

<div class="Menu"">

Should be:

<div class="Menu">

2nd mistake on the javascript close tag, and the error with the selector that you forget to type the . that is a css class selector:

You did:

$(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);
  });
}); 
});//why another close tag? error.

It should be:

$(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);
  });
});

Answer 5

Jsfiddle Demo

You've done multiple mistakes.

1. You have an unnecessary }); . Remove it.
2. You have an unncecessary doublequotes Menu div. Convert it to <div class="Menu">
3. Your button doesn't include dropdown-menu. Select dropdown-menu individually.

Now your code became:

HTML:

<div class="Menu">
    <div class="btn-group">
        <button type="button" id="someAction" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Select Action 
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a class="add">Add</a></li>
            <li><a class="remove">Remove</a></li>
        </ul>
    </div>
</div>

Javascript:

$(document).ready(function () {
    $('.dropdown-menu').fadeOut(); //Just hiding dropdown at first for testing purposes.
    $('#someAction').hover(function () {
        $('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
        $('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
    });
});

Answer 6

You still cant choose any option before menu fades out.

In order to keep menu visible I changed your html

moved id="someAction" to the parent div

<div class="Menu">
    <div class="btn-group" id="someAction" style="float:left">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Select Action 
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" style="display:none">
        <li><a class="add">Add</a></li>
        <li><a class="remove">Remove</a></li>
        </ul>
    </div>
</div>

http://jsfiddle.net/U3VQs/4/