如何使点击下拉菜单不悬停

Question

我有一些代码可以在父li悬停时使我的菜单展开。我想更改它，以便它只在单击时展开。 我在CSS中的代码是：

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

如果仅在单击父级时才能实现此目的？

我的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>

以下是我用来测试此内容的实时页面... http://portal.electrovision.co.uk/dropdown-test/

Answer 1

轻微的CSS调整

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

和一些javascript（jQuery）

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