Javascript-форум - Переключение видимости ul ul

структура меню

<ul class="main-menu">

<li class="active">
<a class="selected" href="">Леса</a>
<ul class="main-menu">
<li><a href="">Леса клиновые</a></li>
<li><a href="">Леса рамные</a></li>
<li><a href="">Леса хомутовые и штыревые</a></li>
</ul>					
</li>
											
<li><a href="">Вышки-тур</a>
<ul class="main-menu">
<li><a  href="">Вышки-тур резервуарные</a></li>
</ul>
</li>

</ul>

сейчас 2 уровень вложенности скрыт вот так:

.main-menu li ul {display:none;}
.main-menu li:hover ul {display:block;}

Хочу сделать так чтобы видимостью управлял именно jq.

Только функция не ховер. А по другому.

При наведение на какой либо <li> внутри которого есть второй уровень - этот второй уровень становился видимый. и если мышку в сторону отвести то он не закрывался бы. А лишь только тогда бы закрывался когда курсор перейдет на другой <li> у которого есть вложенный <ul>

<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .main-menu > li > ul {display:none;} .main-menu > li.active > ul {display:block;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ var li = $(".main-menu").parent('li'); li.mouseenter(function() { li.not(this).removeClass("active"); $(this).addClass("active"); }); }); </script> </head> <body> <ul class="main-menu"> <li class="active"> <a class="selected" href="">Леса</a> <ul class="main-menu"> <li><a href="">Леса клиновые</a></li> <li><a href="">Леса рамные</a></li> <li><a href="">Леса хомутовые и штыревые</a></li> </ul> </li> <li><a href="">Вышки-тур</a> <ul class="main-menu"> <li><a href="">Вышки-тур резервуарные</a></li> </ul> </li> </ul> </body> </html>