During hover on parent element, show child (dropdo

Question

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 changeable, i just don't like to go heavy on the html side.

Basically I just want my drop down to work when you hover over the parent element. Additional css is going to be used to make it pretty and positioned better.

Here's my js:

var dropdown = $('.dropdown');
var parent = dropdown.parent();
$(parent).hover(
    function () {
        dropdown.css('display', 'block');
    }
);

Here's my css:

div.nav {
    text-align: center;
}
div.nav > ul > li {
    margin-top: 15px;
    text-align: center;
    font-size: 1.25em;
}
div.nav > ul > li {
    display: inline-block;
    list-style-type: none;
}
div.nav a {
    padding: 1em;
}
div.dropdown {
    display: none;
    background-color: black;
    position: absolute;
}

Here's my html:

<div class="nav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li>
            <a href="game.html">Sample Game</a>
            <div class="dropdown">
                <a href="index.html">About it</a>
                <br>
                <a href="index.html">Game</a>
            </div>
        </li>
        <li><a href="solutions.html">TP Solutions</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html">Contact Me</a></li>
    </ul>
<div class="clear"></div>

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

Answer 2

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.

Answer 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/

Answer 4

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:

<script src='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>