jquery drop-down menu not working

Question

I know wordpress has drop-down feature but for some reason it's broken on the current theme and I need it to work it again. My current code works but when I click on a parent menu item it opens all the submenus. I need to open only the clicked element.

I posted my code on jsfiddle but for some reason on jsfiddle the jquery code doesn't work. jsfiddle

HTML

<ul id="menu-menu" class="navlinks"><li id="menu-item-257" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-257"><a href="#">Home</a></li>
<li id="menu-item-55" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-55"><a href="#">Menu Item</a></li>
<li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-54"><a href="#">1</a>
<ul class="sub-menu">
<li id="menu-item-82" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-82"><a href="#">Menu Item</a></li>
</ul>
</li>
<li id="menu-item-83" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-83"><a href="#">Menu Item</a></li>
<li id="menu-item-56" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-56"><a href="#">Menu Item</a>
<ul class="sub-menu">
<li id="menu-item-296" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-296"><a href="#">1</a></li>
</ul>
</li>
<li id="menu-item-57" class="accessories menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-57"><a href="#">Accessories</a>
<ul class="sub-menu">
<li id="menu-item-320" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-320"><a href="#">1</a></li>
<li id="menu-item-319" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-319"><a href="#">2</a></li>
<li id="menu-item-317" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-317"><a href="#">3</a></li>
<li id="menu-item-318" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-318"><a href="#">4</a></li></ul>
</li>
</ul>

JQuery:

 $(document).ready(function() {
    $(".accessories").click(function() { //When trigger is clicked...

    //Following events are applied to the subnav itself (moving subnav up and down)
    $(this).parent().find(".sub-menu").slideDown('fast').show(); //Drop down the subnav on click

    $(this).parent().hover(function() {
    }, function(){  
        $(this).parent().find(".sub-menu").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
    });

    //Following events are applied to the trigger (Hover events for the trigger)
    }).hover(function() { 
        $(this).addClass("subhover"); //On hover over, add class "subhover"
    }, function(){  //On Hover Out
        $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });
});

Answer 1

Try this out:- http://jsfiddle.net/adiioo7/5jA3C/2/

JS:-

$(document).ready(function() {
    $(".menu-item").click(function() { //When trigger is clicked...

        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).find(".sub-menu").slideDown('fast').show(); //Drop down the subnav on click

        $(this).hover(function() {
        }, function(){  
            $(this).find(".sub-menu").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
        });

        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() { 
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){  //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });
 });

Answer 2

Change into this:

$(".accessories").click(function () { //When trigger is clicked...

    //Following events are applied to the subnav itself (moving subnav up and down)
    $(this).find(".sub-menu").slideDown('fast').show(); //Drop down the subnav on click

    $(this).hover(function () {}, function () {
        $(this).find(".sub-menu").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
    });

    //Following events are applied to the trigger (Hover events for the trigger)
}).hover(function () {
    $(this).addClass("subhover"); //On hover over, add class "subhover"
}, function () { //On Hover Out
    $(this).removeClass("subhover"); //On hover out, remove class "subhover"
});

you need the current element as selector not its parent.

Side note: your jsfiddle demo not work because you have not selected any framework

Demo: http://jsfiddle.net/XdgF7/