CSS到JQuery：将鼠标悬停转换为单击？（JSFiddle）

如何将此基于CSS的悬停菜单转换为单击？我认为JQuery是最干净的方式，但我很难切换类，因为它只在瞬间打开菜单。任何帮助都会很好

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>

为什么要从CSS切换到jQuery？是否有一种干净的方法可以使用CSS在单击而不是悬停时激活此菜单？