CODEWITHSUNDEEP
javascriptmenunav
Nathan Blackburn
Nathan Blackburn

Reputation: 1

How to make the dropdown on click not hover

I have code that makes my menu expand when the parent li is hovered over. I want to change it so that it only expands when it is clicked. My code in CSS is: 

 .nav li:hover li {
    /* Expanding the list elements */
    height: 30px;
    position: relative;
    top: auto;
}

How do I make this happen only when the parent is clicked?

My HTML: 

<ul class="nav">
    <li class="dropdown" id="dropdownparent">
        <a href="#">Categories</a>
        <ul id="dropdown">
            <li id="dropdown"><a href="#">Sublink</a></li>
            <li id="dropdown"><a href="#">Sublink</a></li>
            <li id="dropdown"><a href="#">Sublink</a></li>
            <li id="dropdown"><a href="#">Sublink</a></li>
        </ul>
    </li>
</ul>

Here is the live page I am using to test this... http://portal.electrovision.co.uk/dropdown-test/

Upvotes: 0

Views: 3064

Answers (1)

jthomas
jthomas

Reputation: 858

A slight css tweak

.nav li.open li {
    /* Expanding the list elements */
    height: 30px;
    position: relative;
    top: auto;
}

And some javascript (jQuery)

$('.nav > li.dropdown').on('click', function(e) {
    $(this).toggleClass('open');
});

Upvotes: 1

Related Questions