CODEWITHSUNDEEP
javascriptjqueryhtmlcssnavigationbar
dil33pm
dil33pm

Reputation: 1643

StopPropogation() not working

I am coding a multilevel drop down menu in which when the parent is hovered, the submenu drops down with JQuery fadeIn(). But the effect is getting propagated to the child elements. They are also having fadeIn() when hovered on. The code is

HTML

<nav>
<ul id="headnav">
    <li> <a class="sliding-middle-out" href="index.php"> ABOUT </a> </li>
    <li> <a class="sliding-middle-out" href="practice.php"> PRACTICE </a> </li>
    <li> <a class="sliding-middle-out" href="research.php"> RESEARCH </a> 
        <ul>
            <li> <a href="papers.php"> Papers </a> </li>
            <li> <a href="articles.php"> Articles </a> </li>
            <li> <a href="phdstudents.php"> PhD Students </a> </li>
            <li> <a href="presentations.php"> Presentations </a> </li>
        </ul>
    </li>
</ul>
</nav>

JQuery 

$(document).ready(function() { 
    $('nav > ul > li > ul').hide();
    $('nav > ul > li').hover(function() {
        $(this).find('ul').fadeIn(400);
    },function() {
        $(this).find('ul').fadeOut(400);
    }); 

});

CSS

nav {
    position: absolute;
    min-width:30%;
    float:right;
    right:12%;
    top: 16%;
  }

  nav ul li {
    display: inline-block;
    min-width: 20px;
    text-transform: uppercase;
  }

  nav ul li a{
    float: left;
    padding: 0px 10px 0px 10px;
  }

  nav ul li ul {
    display: inline-block;
    position: absolute;
    width: auto;
    margin-left:-35%;
    margin-top:7%;
  }

  nav ul li ul li {
    display: inline-block;
    min-width:10px;
  }

  nav ul li ul li a {
    color:#7f8c8d;
  }

When you hover your mouse over the child elements, they again fadeIn(). I tried e.stopPropagation() and e.preventDefault() but none of them are working.

Please help

Upvotes: 0

Views: 51

Answers (1)

Johannes Reuter
Johannes Reuter

Reputation: 3547

Show the submenu on hovering over the outer li, but hide it on leaving the inner ul:

$('nav > ul > li').mouseenter(function(e) {
    $(this).find('ul').fadeIn(400);
});
$('nav > ul > li > ul').mouseleave(function() {
    $(this).fadeOut(400);
});

http://jsfiddle.net/mava7btt/3/

Upvotes: 1

Related Questions