Как убрать :hover при клике по нему?
 

Здравствуйте. Есть просто выпадающее меню на чистом css http://heeg.ru/heeg.html#faq оно нормально работает на компьютере но на тач устройствах после клика на пункт меню, :hover не пропадает, а продолжает висеть пока не ткнешь в другую часть экрана. Можно как-нибудь сделать так, чтобы при при клике на этот hover он исчезал?

ничего умнее чем просто прятать ховер после клика и показывать его опять при наведении я не придумал...

var elements = document.querySelectorAll('.tw-table-of-contents-top>ul ul');



document.querySelector(".tw-table-of-contents-top").onmouseover = function(event) {

  for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'inline'
  }
};



function up() {
  for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none'
  }
}

up() я вызываю при клике на любую ссылку. На телефоне работает и ховер пропадает.