DropDown Menu Using Jquery

I got this issue, In the above html I cannot click on the dropdown menu, I went wrong some where ,my dropdown menu in this code is not working can any one please let me know where

Solution 1:

You had a number of issues in your code. I think I've fixed them all here: http://jsfiddle.net/exuY9/

A couple of things:

1. In your last bit of JS, you have an event handler inside of another event handler. While this is legal, I doubt it what you intended;
2. Your code may have actually been working in that I think it was showing the menus as you wanted, but it was also immediately hiding them as well. Why? Because your onclick handler for the #dr1, #dr2 were allowing the click to continue through the page onto the HTML's onclick handler, which immediately undid the show() again so fast, you thought nothing was happening at all;
3. I've also moved all of your code to inside the $(function(){...}); block, only because I wasn't sure of you were inserting this code in your head, in which case, the elements wouldn't be present to attach handlers, to. If your script was attached at the end of the body then this would be less of a concern;
4. Instead of creating a new handler for each ID of the same class, you can just make one for the class. You can see how I've done this a couple of times in the revised code;
5. And, as a matter of style, it has become customary amongst front-end devs, to use single quotes in Javascript and double-quotes in HTML. This will save you a lot of headaches as if you use double quotes in both, you'll end up needing to escape stuff all the time.