изменить выпадающее меню от зависания к 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(). Пример

<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) имеет эту функцию: По щелчку, функция будет проверять, если отображаются ули под литием или нет, то сделать это иметь противоположное значение дисплея. Вы можете использовать ту же функцию для всех меню, при условии, что вы дадите своим uls тот же идентификатор, что и родительское li + 'menu'.

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'; 
      } 
     };