структура меню
<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>