Hover function on nav item not working

Question

I have the following hover script that is supposed to handle the sliding down and up of sub menus in my navigation bar:

$j('body').ready(function() {
    $j('.menu-item').hover(function() {
        $j(this).find('.sub-menu').slideDown("slow");
    },
        function() {
            $j(this).find('.sub-menu').slideUp("slow");
        });
});

It slides down fine, but for some reason it doesn't slide up, but rather just disappears when leaving the div.

You can see the nav item in action on this page, specifically on the 'news' item, which has a dropdown for an events page. You will need to enter the following credentials as the site is under development:

username:guest

password:stackoverflow

Ram · Answer 1 · 2012-07-08T10:54:49.430

0

try this:

$j(document).ready(function() {
    $j('.menu-item').hover(function() {
        $j(this).find('.sub-menu').stop().slideToggle("slow");
    });
});

you should position the element relatively:

.sub-menu {
   position: relative;
}

edited Jul 08 '12 at 10:54

answered Jul 08 '12 at 10:35

Ram

143,282
16
168
197

i don't think there is an issue, because he said that `slideDown` works fine – mgraph Jul 08 '12 at 10:37
Note that changing the `body` selector to `document` will make no difference - you can select any element and the `ready` event handler will always execute on DOM ready. – James Allardice Jul 08 '12 at 10:37
Same result with this script I'm afraid, div just disappears. As I've used the script from the original question in other situations, I'm a bit perplexed. – Nick Jul 08 '12 at 10:43
No, that doesn't help I'm afraid. The nav item already has position:absolute due to the default css of the Wordpress theme I am using: `#nav ul, #nav .sfhover ul ul, #nav :hover ul ul {left: -9999px;position: absolute;}` – Nick Jul 08 '12 at 10:55
@Nick surely the problem is related to CSS. – Ram Jul 08 '12 at 10:59
well, yes, I'd say so, but I've no idea what CSS. I have created a child theme for Wordpress, so I am using a custom CSS file to override the default CSS. So, it's probably something to do with the default CSS, but it seems strange to me that slideDown would work fine, but not slideUp. – Nick Jul 08 '12 at 11:07

score 0 · Answer 2 · answered Jul 08 '12 at 10:35

0

$j('.menu-item').mouseover(function() {
    $j(this).find('.sub-menu').slideDown("slow");
});
$j('.menu-item').mouseout(function() {
    $j(this).find('.sub-menu').slideUp("slow");
});

answered Jul 08 '12 at 10:35

Nikola K.

7,093
13
31
39

Thanks, but with this I get a slide up and down repeating when I hover over the div – Nick Jul 08 '12 at 10:39

Hover function on nav item not working

2 Answers2