There are a few problems. Your
document.ready function is not closed off properly. You need to restrict the
subMenu selection to that for the currently active
li only. Applying the
mouseover/
mouseout functionality to the anchor will result in being unable to access the
subMenu as it will close as soon as you leave the anchor. Also, you can combine the
mouseover/
mouseout functionality with the
hover function. Try this instead:
- $(function() {
- $('#nav li').hover(function() { // Apply hover to the li, not the anchor
- $('div.subMenu', this).show(2000); // Find the subMenu within this li
- }, function() {
- $('div.subMenu', this).hide(2000);
- });
- }); // Missing