I recently created a basic navigation menu with dropdown functionality using CSS3 initially, but I decided to enhance it by incorporating jQuery to display the dropdown after a set timeframe. However, I am facing an issue where all dropdowns appear when hovering over any list item (li). Despite my efforts to modify the code, I have been unable to target the correct element.
Any help or suggestions on resolving this issue would be highly appreciated!
The structure of my menu is as follows:
<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>
Below is the jQuery script used for the dropdown functionality:
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);
}
}
);