スマホで要素をタッチした際に、手を離した後にも:hoverの効果が持続してしまいます。対処法を教えて下さい。

アコーディオンメニューを作成しており、スマートフォン用のメニューも作成しました。

html
1<ul>
2  <li class='dropdown'> 
3    <a href='#'>メニュー1</a>
4    <ul class='dropdown-menu'>
5      <li>メニュー1-1</li>
6      <li>メニュー1-2</li>
7    </ul>
8  </li>
9  <li> 
10    <a>メニュー2</a>
11  </li>
12</ul>

css
1ul li p ul{
2  display:none;
3}

javascript
1$(function(){
2  $('li.dropdown a').click(function(){
3    $('ul.dropdown-menu').slideToggle;
4  });
5});

記述は上記のようになっており、'li p'をクリックすることで'ul.dropdown-menu'が表示されます。

こういった記述がある時に、スマートフォンでの挙動に問題が起きました。

・メニューをタッチすると、その要素の'p'にhoverがかかったままになる。
・他要素をタッチしないとhoverが解除されない
・その為、タッチして開くメニューが'p.1'と'p.2'のように複数あった場合、'p.1'を開いた後別のメニューである'p.2'をタッチしても、前にタッチした'p.1'がhoverで選択されており'p.2'が選択できません。

この時'p.1'のhoverが解除されるため、もう一度'p.2'をタッチするとメニューは開くのですが、これではユーザビリティに問題があります。

なんとかjqueryなどで、ある要素をタッチし、指を離した後にその要素のhoverを解除（選択を解除？）したいと考えています。

実現は可能でしょうか？
ご回答よろしくお願い致します。