During Hover On Parent Element, Show Child (dropdown Nav)

I'm trying to make a stupid horizontal nav bar with a drop-down on some of the items. The way I decided to do it is just by putting the drop-down in a div tag. This is easily cha

Solution 1:

You should not be using "parent" as a variable name, as it's a reserved word.

$(document).ready(function() {
    var$dropdown = $('.dropdown'),
        $parent = $dropdown.parent();
    $parent.on("mouseover",
        function () {
            $dropdown.css('display', 'block');
        }
    );
    $parent.on("mouseout",
        function () {
            $dropdown.css('display', 'none');
        }
    );
});

Solution 2:

According to the oreder this has to be done:

• add a jQuery plugin first
• Then add your script

so the order will be like this:

<scriptsrc='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script><script>
   $(function(){
      var dropdown = $('.dropdown');
      var parent = dropdown.parent();
      $(parent).hover(function () {
         dropdown.css('display', 'block');
      });
   });
</script>

Solution 3:

Please try the below code.

    $(".nav").on("mouseenter","li",function(){
        $(this).find(".dropdown").show();
    });
    $(".nav").on("mouseleave","li",function(){
        $(this).find(".dropdown").hide();
    });

In your code " dropdown.parent(); " -> this will refer all the parents which have child dropdown and will show the menu. we need to refer current hover parent. Please check the working example in below link.

http://jsfiddle.net/renjith/wX48f/

Solution 4:

There are so many good solutions to use jQuery and CSS to show a drop down menus. So you don't need to reinvent the wheel. Here are some examples that you might be able to find one to fit your need.