Question

I recently made this simple navigation where you have a couple links that have a dropdown. First it was in CSS3 only but then I decided to add some jQuery to make the dropdown appear after a certain amount of time. (Most of the jQuery code is based on an answer given in another thread)

Basically, my issue is that I can’t target the right element hovered, therefore when I hover a li element, all my dropdown show up. I tried tweaking it as much as I could but I can’t find the right piece of code.

Any reply is greatly appreciated!

My menu looks like this:

<ul id="generale">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li>
                    <a href="#">Item 3</a>
                    <ul>
                        <li><a href="#">Subitem 1</a></li>
                        <li><a href="#">Subitem 2</a></li>
                        <li><a href="#">Subitem 3</a></li>
                        <li><a href="#">Subitem 4</a></li>
                        <li><a href="#">Subitem 5</a></li>
                    </ul>     
                </li>
                <li>
                    <a href="#">Item 4</a>
                    <ul>
                        <li><a href="#">Subitem 1</a></li>
                        <li><a href="#">Subitem 2</a></li>
                        <li><a href="#">Subitem 3</a></li>
                        <li><a href="#">Subitem 4</a></li>
                        <li><a href="#">Subitem 5</a></li>
                    </ul>  
                </li>
                <li><a href="#">Item 5</a></li>
                <li><a href="#">Item 6</a></li>
            </ul>

and my jQuery:

var navTimers = [];  
            $( "#generale > li" ).hover(
                function () {  
                    var id = jQuery.data( this );  
                    var $this = $( this ); 

                    navTimers[id] = setTimeout( function() {  
                        $('#generale ul').fadeIn(200); 
                        navTimers[id] = "";  
                    }, 300 );  
                },  
                function () {  
                    var id = jQuery.data( this );  
                    if ( navTimers[id] != "" ) {  
                        clearTimeout( navTimers[id] );  
                    } else {  
                        $('#generale ul').fadeOut(200);
                    }  
                }  
            );  

Answer 1

Your fadeIn and fadeOut functions are currently targeting all uls within the #generale element.

Try changing

$('#generale ul').fadeIn(200); 

to

$this.find('ul').fadeIn(200);

and

$('#generale ul').fadeOut(200);

to

$this.find('ul').fadeOut(200); // you'll also have to define $this = $(this)