[jQuery] Hover Not Working As Expected
I am missing something fundamental and am sure that someone can point
me in the right direction.
I have a list like so:
<li id="GalleryMenu"><a href="../Gallery/Default.htm">DD</a>
<ul class="DoNotDisplay">
<li><a href="../Gallery/Santuary.htm">Santuary</a></li>
<li><a href="../Gallery/Stream.htm">Stream</a></li>
<li><a href="../Gallery/Winter.htm">Winter</a></li>
</ul>
</li>
I have styled it so that the list items float. The class DoNotDisplay
hides the unordered list. When the mouse hovers over GalleryMenu then
jQuery removes the DoNotDisplay class so that the unordered list is
displayed, moving off GalleryMenu hides the list. This works fine and
the code is:
$(document).ready(
function() {
$('li#GalleryMenu').add('li#PoemMenu').hover(
function() {
$(this).children('ul').removeClass('DoNotDisplay');
},
function() {
$(this).children('ul').addClass('DoNotDisplay');
}
);
}
);
I would like the unordered list to slide open, so I changed the code
to:
$(document).ready(
function() {
$('li#GalleryMenu').add('li#PoemMenu').hover(
function() {
$(this).children('ul').show('fast');
console.log('Open list');
},
function() {
$(this).children('ul').hide('fast');
console.log('Close list');
}
);
}
);
The list opens properly, but does not close when I move the mouse from
the list. When looking at this in Firebug I see that 'hide' is
firing, but for some reason does not close the list. If I "unfloat"
the list then the code works just fine.
What am I missing? I'm sure that it is staring me in the face, but I
am just not seeing it. The full code can be found at
http://glsmyth.com/Sedwick/Templates/
Thanks for the help.
Cheers -
george