Question

I’m trying to add a div as a dropdown to a text menu. On hovering over the text link, I’d like to have the div appear below the text, and dissapear when the user either rolls off the text, rolls off the div, (or click a link in the div, obviously). Here’s the code I have so far:

I can’t get the div to display at all!

Here’s a jfiddle: http://jsfiddle.net/VtXvB/

---

Viewing a local copy of my code wasn’t finding the jquery library correctly (since I was using the version that is ambiguous to http:// or https://)

I fixed that, and added a “type” attribute to my script tags, and all is good.

Answer 1

This is because you are using hover event on anchor tag, in that case unhover event occur when you move to div thats why that div became hide. So instead of your JS code use below :

$(document).ready(function(){
  $("#menu li").hover(
    function () {
      $(this).find("a").addClass('active').next('.submenu').addClass('active').slideDown('fast');
    }, 
    function () {
      $(this).find("a").removeClass('active').next('.submenu').removeClass('active').slideUp('fast');
    }
  );
});