I've searched and not found exactly what I was looking for.

I have my menu working with cookies so when the page is reloaded it keeps the menus that were open, open.

But I realised when you click say a sub-item of Hyperlink 2 it will close Hyperlink 2 altogether. Is there a way too keep it open?

http://jsfiddle.net/Dnamixup/5S54v/

I tried using the simulate click answer from Here but it didn't work unless I placed it wrong.

I'm still new at javascript/jQuery but I'm slowly getting it!

Thank you

<ul class=nav>

<li><a>Hyperlink 1</a>



</li>

<li class=drop><a>Hyperlink 2</a>



    <ul id=m1>

        <li><a href=#>Hyperlink Sub</a>



        </li>

        <li><a href=#>Hyperlink Sub</a>



        </li>

    </ul>

</li>

<li class=drop><a>Hyperlink 3</a>



    <ul id=m2>

        <li><a href=#>Hyperlink Sub</a>



        </li>

        <li><a href=#>Hyperlink Sub</a>



        </li>

    </ul>

</li>

<li class=drop><a>Hyperlink 4</a>



    <ul id=m3>

        <li><a href=#>Hyperlink Sub</a>



        </li>

        <li><a href=#>Hyperlink Sub</a>



        </li>

    </ul>

</li>

jQuery(function ($) {

// jQuery code in here can safely use $

$('.nav li')

    .css({

    cursor: pointer

});



$(.drop)

    .on('click', function () {

    $(this).toggleClass('open');

    $(this).find('ul').toggle();

    $.cookie('open_items', 'the_value');

    openItems = new Array();

    $(li.drop).each(function (index, item) {

        if ($(item).hasClass('open')) {

            openItems.push(index);

        }

    });

    $.cookie('open_items', openItems.join(','));

});



if ($.cookie('open_items') && $.cookie('open_items').length > 0) {

    previouslyOpenItems = $.cookie('open_items');

    openItemIndexes = previouslyOpenItems.split(',');

    $(openItemIndexes).each(function (index, item) {

        $(li.drop).eq(item).addClass('open').find('ul').toggle();

    });

}

});