Your code is fine - I think it has to do with the float cascading to
the menu items. If you add in float:none to the children li elements
it should work:
#NavList li ul li {
...
float:none;
}
On Sep 11, 10:27 pm, GLSmyth <george.sm...@gmail.com> wrote:
> 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
> athttp://glsmyth.com/Sedwick/Templates/
>
> Thanks for the help.
>
> Cheers -
>
> george
