hover dropdown menu jquery

Question

Please help me solve the following error when I hover over the main menu the submenu dropdown won't show.

The HTML looks like this:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" 
              role="button" aria-expanded="false">
        Page<span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="404.html">404 Page</a></li>
      <li><a href="#">Link Two</a></li>
      <li><a href="#">Link Three</a></li>               
    </ul>
</li>

Javascript code is the following:

$('ul.nav li.dropdown').hover(function() {

  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);

}, function() {

  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);

});

your code works fine jsfiddle.net/mohamedyousef1980/89fL3Lfj .. be sure to include jquery — Mohamed-Yousef
– Mohamed-Yousef, Commented May 17, 2017 at 3:34

RemyaJ · Accepted Answer · 2017-05-17 05:00:11Z

4

$(document).ready(function() {
    $( '.dropdown' ).hover(
        function(){
            $(this).children('.dropdown-menu').slideDown(200);
        },
        function(){
            $(this).children('.dropdown-menu').slideUp(200);
        }
    );
}); // end ready

.dropdown-menu {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" 
              role="button" aria-expanded="false">
        Page<span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="404.html">404 Page</a></li>
      <li><a href="#">Link Two</a></li>
      <li><a href="#">Link Three</a></li>               
    </ul>
</li>

edited May 17, 2017 at 5:00

answered May 17, 2017 at 3:21

RemyaJ

5,5264 gold badges25 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

guradio Over a year ago

links rot answering an OP with a link is not a good for future readers

RemyaJ Over a year ago

Did you refer the fiddle?

Collectives™ on Stack Overflow

hover dropdown menu jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related