You can do 2 things for this. Your selector $('#dropdown_nav li') is
grabbing all of the li elements under the dropdown_nav element, not just
the 2 direct children. You can change it to $('#dropdown_nav > li') to
target only the direct children.
Alternatively, what I would do, is modify the handler function to be more
general, thus allowing for expansion more levels deep in fewer lines of
code, like so:
$(document).ready(function() {
//We initially hide the all dropdown menus
$('#dropdown_nav ul').hide();
//When hovering over the main nav link we find the dropdown
menu to the corresponding link.
$('#dropdown_nav li').hover(function() {
//Find a child of 'this' with a class of .sub_nav and make
the beauty fadeIn.
$(this).find('ul:first').fadeIn(100);
}, function() {
//Do the same again, only fadeOut this time.
$(this).find('ul:first').fadeOut(50);
});
});
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Order the Adobe Coldfusion Anthology now!
http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion
Archive:
http://www.houseoffusion.com/groups/cf-community/message.cfm/messageid:368856
Subscription: http://www.houseoffusion.com/groups/cf-community/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-community/unsubscribe.cfm
