javascript - Persist sub-menu on hover -

i trying keep sub-menu appearing when hover onto it. disappears when hover off locations.

my demo: http://jsfiddle.net/269yqavo/

here code:

$('.main a.primary').hover(function(e){  	e.preventdefault();  	$(this).next().toggle();  }).hover();

.sub-menu {display:none;background:#ccc}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  <ul class="sf-menu">      <li class="main">        <a href="" class="primary">locations</a>          <ul class="sub-menu">          <li><a href="/location/athina/" title=          "view posts in athina">athina</a></li>            <li><a href="/location/beirut/" title=          "view posts in beirut">beirut</a></li>          </ul>      </li>    </ul>

here's solution without js @ all. show sub menu whenever container hovered.

http://jsfiddle.net/269yqavo/1/

.sub-menu {     display:none;     background:#ccc }  .main:hover .sub-menu {     display: block; }