Question

我正在寻找下拉菜单（onlcick）

经过多次搜索，最后我找到了一个

但问题是，我的代码基于（悬停）Not（onclick）

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

我的代码：

<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并使其变得更简单。

Answer 2

1）通过添加display:none;修改您要下拉的菜单的CSS（这将使它们不显示）

2）将一个id分配给根菜单项，另一个可以使用第一个构建到根项目下的列表（您想要删除）

3）在同一元素声明中，有onclick=dropdown()。实施例

<li id='menu1' onclick=dropdown()><ul id='menu1menu' >将在点击该元素时对下拉列表功能进行调整。

<li><a href="./" id='drivers' onclick=dropdown() class="dir">Download Drivers</a>
    <ul id='driversmenu'>
        <li><a href="./">Download Drivers</a></li>
        <li><a href="./">Driver Widget</a></li>
        <li><a href="./">NVIDIA Software</a></li>
    </ul>
</li>

4）有这个功能：单击时，该函数将检查是否显示了li下的ul，然后使其具有相反的显示值。你可以对所有菜单使用相同的功能，只要你给你的uls与父li +'menu'相同的id。

  function dropdown()
        {
            if(document.getElementById(window.event.srcElement.id+'menu').style.display=='block'){
                document.getElementById(window.event.srcElement.id+'menu').style.display='none';
            }
            else{ 
                document.getElementById(window.event.srcElement.id+'menu').style.display='block';
            }
        };

更改下拉菜单从悬停到onclick

2 个答案: