On-click Drop-down Nav Menu

I am making a column list with some drop-down menus and I needed the Jquery for the drop-down to make it work. I have found some Jquery for this but the problem is when you have tw

Solution 1:

I have one answer for this problem. Please try this code below:

$(document).ready(function() {
     $('.sort-list-dropdown').hide();
     $('ul.list-menu li').click(function() {
            $(this).next('.sort-list-dropdown').toggle();
     });
});

In code 'click', you can change it to 'hover'.

Solution 2:

Try something like this:

http://jsfiddle.net/SinisterSystems/bmwBr/5/

HTML:

<ul><liclass="sec">Heading One</li><li><ul><li>Secondary</li><li>Secondary</li><li>Secondary</li><li>Secondary</li><li>Secondary</li><liclass="sec">Heading Two</li><li><ul><li>Third</li><li>Third</li><li>Third</li></ul></li></ul></li><liclass="sec">Heading One</li><li><ul><li>Secondary</li><li>Secondary</li><li>Secondary</li><li>Secondary</li><li>Secondary</li></ul></li></ul>

JS:

$(function(){
    $('li.sec').on('click', function() {
        $(this).next('li').slideToggle();
    });
});

CSS:

ulli {
    list-style:none;
}
.sec {
    background:#efefef;
    padding:25px;
    font-size:24px;
}

Try something like this:

http://jsfiddle.net/SinisterSystems/bmwBr/5/