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

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

回答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:

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

回答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/

回答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.

来源：https://stackoverflow.com/questions/14422199/during-hover-on-parent-element-show-child-dropdown-nav

标签

javascript

jquery

css

drop-down-menu

navigation