更改下拉菜单从悬停到onclick

Question

我正在寻找下拉菜单(onlcick)

经过多次搜索,我终于找到了一个

但问题是,我的代码是基于(悬停)不(onclick)

我想通过javascript或css将代码转换为onclick而不是悬停

我的代码:

<style>
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}
</style>
<ul class="dropdown">
    <li><a href="./" class="dir">Download Drivers</a>
        <ul>
            <li><a href="./">Download Drivers</a></li>
            <li><a href="./">Driver Widget</a></li>
            <li><a href="./">NVIDIA Software</a></li>
        </ul>
    </li>
    <li><a href="./">Shop</a></li>
    <li><a href="./" class="dir">Products</a>
        <ul>
            <li><a href="./">Desktop</a></li>
            <li><a href="./">Workstation</a></li>
            <li><a href="./">Servers</a></li>
            <li><a href="./">Motherboard</a></li>
        </ul>
    </li>
    <li><a href="./" class="dir">Technologies</a>
        <ul>
            <li><a href="./">NVIDIA SLI</a></li>
            <li><a href="./">NVIDIA Hybrid SLI</a></li>
        </ul>
    </li>
</ul>

</body>
</html>

Answer 1

这是你想要的效果吗？请看这里的小提琴:http://jsfiddle.net/UQwJz/4/ [编辑]

我已经彻底改造了你的CSS并使其变得更简单.