Терять hover при нажатие
 

Здравствуйте.

Есть выпадающий список, при нажатие из предложенных пунктов выдающего списка подгружается асинхронно контент.

Вопрос:

Как как при помощи js потерять hover, что бы список скрылся.

PS. hover установлен через css, ul li:hover ul

Спасибо.

Правильный ответ - никак. Как вариант - раскрывать список не через hover, а через mouseover добавлением класса, а по клику или mouseout удалять этот класс. Там будут свои сложности, но хоть как-то будет работать.

попробуй blur(событие)

Лениво писать лишнии два метода... Но придется(((

Блур не так работает как ховер. Не прокатит.

Решение задачи
 

Вообщем очень лениво написал, работает на ура.

$(document).ready(function(){

	var menu = $('#h_menu').children().children();

	menu.hover(function(){
		$(this).find('ul').show(100);
	}, function(){
		$(this).find('ul').hide(100);
	});


	$(menu.children('a')).click(function(){
		$(this).next().hide();
	});

	menu.find('ul a').click(function(){
		$(this).parent().parent().hide();
	});

});

#h_menu {width: 950px; height: 40px;margin: 15px auto 0 auto;text-align: center;}
#h_menu ul{margin: 0; padding: 0;}
#h_menu ul li{display: inline-block; position:relative; margin: 0;}
#h_menu a{display:inline-block;color: black; font-weight: bold; font-size: 14px; text-decoration: none; margin-left: -4px;padding: 12px 12px;}
#h_menu li:hover a{background-color: white;border-radius: 10px;}
/*Горизантальное верхнее ВСПЛЫВАЮЩИЕ меню с градиентом*/
#h_menu ul li ul{display: none;position: absolute;width: 210px !important;border-bottom: 1px solid #f99100;border-left: 1px solid #f99100;border-right: 1px solid #f99100;border-radius: 0 0 10px 10px;z-index: 999;width: 170px;text-align: left;padding-bottom: 3px;}
#h_menu li ul li{display: block;}
#h_menu ul li ul li a{color: #26272b; margin: 0; font-size: 13px;background-color: rgba(0, 0, 0, 0) !important;display: block;padding: 6px 15px;}
#h_menu li li a:hover{background-color: white !important;border-radius: 5px; color: #6d6e72; }

<div id="h_menu">
	<ul>
		<li><a href=""></a>
			<ul class="e_gradient_o" style="margin-left: 0;">
				<li><a href="/"></a></li>
				<li><a href="/"></a></li>
				<li><a href="/"></a></li>
				<li><a href="/"></a></li>
			</ul>
		</li>
		<li><a href=""></a>
			<ul class="e_gradient_o">
				<li><a href="/"></a></li>
				<li><a href="/"></a></li>
				<li><a href="/"></a></li>
				<li><a href="/"></a></li>
			</ul>
		</li>
		<li><a href=""></a>
			<ul class="e_gradient_o" style="margin-left: -120px;">
				<li><a href="/"></a></li>
				<li><a href="/"></a></li>
				<li><a href="/"></a></li>
				<li><a href="/"></a></li>
			</ul>
		</li>
	</ul>
</div>