.not() isn't working properly for me

Question

I'm attempting to make a menu where it will stay open for so long and then fades if the parent or the menu is not hovered over for a given period of time.

If you highlight over another parent in the menu the idea is it closes all other menus except for the parent you're already on. The code as it stands keeps all menus open instead of closing all but the one you have highlighted

The Menu

$text .=            '<div class="dropdown">';
$text .=                '<a href="/products">Products</a>';
$text .=                '<div class="menu-popup">';
$text .=                '</div>';
$text .=            '</div>';

$text .=            '<div class="dropdown">';
$text .=                '<a href="/about">About</a>';
$text .=                '<div class="menu-popup">';
$text .=                '</div>';
$text .=            '</div>';

The Jquery:

<script>
    $(".dropdown").mouseover(function() {
       //Highlighting over the parent "dropdown" closes all other popup menus & 
       //displays the popup related to the parent
       $(".menu-popup").not(this).find(".menu-popup").hide();
       $(this).find(".menu-popup").fadeIn("fast");

       //Reset the timer to hide popup if scrolling back over parent
       //before time runs out
       if (hideTimer !== null) {
           clearTimeout(hideTimer);
       }
    });

    //Scrolling off of the dropdown parent will set a timer that will 
    //hide the menu-popup
    $(".dropdown").bind("mouseout", function(){
        hideTimer = setTimeout(function(){
        $(".menu-popup").fadeOut("fast");
     }, 300);

});
</script>

Answer 1

In this case, $(this) refers to drop-down and not menu-popup . So you need to find menu-popup inside drop-down but not inside current drop-down .

change this

$(".menu-popup").not(this).find(".menu-popup").hide();

to

 $(".dropdown").not(this).find(".menu-popup").hide();

Answer 2

Remove the not() altogether, you're fading in the one you need afterward, so just hide them all.

$(".menu-popup").hide();
$(this).find(".menu-popup").fadeIn("fast");

Answer 3

I would simply recommend to use like this:

$(".menu-popup").hide();//first hide all menu-popup
$(this).find(".menu-popup").fadeIn("fast"); //display this menu-popup only