jquery - CSSからJQueryへ:ホバーからクリックへの変換? (JSFiddle)

Question

この CSS ベースのホバー メニューをクリックに変換するにはどうすればよいですか? JQuery が最もクリーンな方法だと思いますが、メニューが一瞬しか開かないため、クラスを切り替えるのに苦労しています。どんな助けでも素晴らしいでしょう。

http://jsfiddle.net/PrtvG/

HTML

<div id="navi1" class="navi">
    <ul><li><a href="">Link1</a></li><li class="sel"><a href="">Link2</a></li><li><a href="">Link3</a></li><li><a href="">Link4</a></li><li><a href="">Link5</a></li><li><a href="">Link6</a></li><li><a href="">Link7</a></li><li><a href="">Link8</a></li></ul>
</div>
<div id="navi2" class="navi">
    <ul><li><a href="">Link1</a></li><li class="sel"><a href="">Link2</a></li><li><a href="">Link3</a></li><li><a href="">Link4</a></li><li><a href="">Link5</a></li><li><a href="">Link6</a></li><li><a href="">Link7</a></li><li><a href="">Link8</a></li></ul>
</div>
<div id="navi3" class="navi">
    <ul><li><a href="">Link1</a></li><li class="sel"><a href="">Link2</a></li><li><a href="">Link3</a></li><li><a href="">Link4</a></li><li><a href="">Link5</a></li><li><a href="">Link6</a></li><li><a href="">Link7</a></li><li><a href="">Link8</a></li></ul>
</div>