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>

    <li class="sec">Heading One</li>
    <li><ul>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>

        <li class="sec">Heading Two</li>
        <li><ul>
            <li>Third</li>
            <li>Third</li>
            <li>Third</li>
        </ul></li>

    </ul></li>

    <li class="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:

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

Try something like this:

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