改變下拉菜單的onclick

Question

我找的下拉菜單（onlcick）

許多搜索後，終於我發現一個

但問題是，我的代碼是基於（懸停）不（的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）修改要下拉菜單的CSS，通過添加display:none;（這會讓他們無法顯示）

2）分配一個id根菜單項和其他一些能夠3）在相同的元素聲明中，有onclick=dropdown()。3）在相同的元素聲明中，使用第一個到根目錄下的列表（您想要刪除）

。示例

<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）具有這樣的功能： 點擊之後，如果利下的UL是顯示或不顯示，則使之具有相反的顯示值的函數將檢查。 對於所有菜單，您可以使用相同的功能，只要您爲您的uls提供與父li +'菜單'相同的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'; 
      } 
     };