Javascript-форум - mouseover jquery

Добрый вечер!Подскажите пожалуйста,как реализовать вот такую задачу.
При клике по пункту меню,открывается подменю,если пользователь увел мышку с этого подменю,то через 2 секунды оно закрывается,и тоже самое,если кликнуть в любую область экрана.
Сейчас сделано,что открывается по клику и скрывается тоже по клику

<ul class = "menu-ul">
				<li class = "li">
					<div class="one-block-li">
						<a href="#main">
							<div class = "logo"></div>
						</a>
					</div>
				</li>
				<li class = "li">
					<div class="two-block-li" id = "two-block-li">					
						<a href="#news" class = "href-drop-two">
							<div class = "logo-articles"></div>
							<p class = "articles-title">статьи / новости</p>
							<p class = "articles-text">Популярные статьи и свежие новости</p>
						</a>
						<div class = "delemiter-line"></div>
							<ul class = "dropdown-child">
								<li class = "border-div current">
							    	<a href="http://www.вашдомен.ru/page1.html">- Подкатегория меню </a>
								</li>
								<li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page2.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page3.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							   	 	<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
							   	</li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
								</li>
				  		</ul>
					</div>
				</li>
				<li class = "li">
					<div class = "three-block-li">
						<a href="#files" class = "href-drop-three">
							<div class = "logo-articles logo-articles-two"></div>
							<p class = "articles-title articles-title-two">файлы / моды</p>
							<p class = "articles-text articles-text-two">Популярные статьи и свежие</p>
						</a>
						<div class = "delemiter-line delemiter-line-two"></div>
						<ul class = "dropdown-child">
								<li class = "border-div current">
							    	<a href="http://www.вашдомен.ru/page1.html">- Подкатегория меню </a>
								</li>
								<li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page2.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page3.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							   	 	<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
							   	</li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
								</li>
				  		</ul>
					</div>
				</li>
				<li class = "li">
					<div class = "four-block-li">
						<a href="#milteeplayers" class = "href-drop-four">
							<div class = "logo-articles logo-articles-three"></div>
							<p class = "articles-title articles-title-three ">мультиплееры</p>
							<p class = "articles-text articles-text-three">Популярные статьи и свежие</p>
						</a>
						<div class = "delemiter-line delemiter-line-three"></div>
						<ul class = "dropdown-child">
								<li class = "border-div current">
							    	<a href="http://www.вашдомен.ru/page1.html">- Подкатегория меню </a>
								</li>
								<li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page2.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page3.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							   	 	<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
							   	</li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
								</li>
				  		</ul>
					</div>
				</li>
				<li class = "li">
					<div class = "five-block-li">
						<a href="#" class = "href-drop-five">
							<div class = "logo-articles logo-articles-four"></div>
							<p class = "articles-title articles-title-four">дополнительно</p>
							<p class = "articles-text articles-text-four">Популярные статьи и свежие</p>
						</a>
						<ul class = "dropdown-child">
								<li class = "border-div current">
							    	<a href="http://www.вашдомен.ru/page1.html">- Подкатегория меню </a>
								</li>
								<li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page2.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page3.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							   	 	<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
							   	</li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page4.html">- Подкатегория меню</a>
							    </li>
							    <li class = "border-div">
							    	<a href="http://www.вашдомен.ru/page5.html">- Подкатегория меню</a>
								</li>
				  		</ul>
					</div>
				</li>
			</ul>

$(function() {
    var timer;
    $('.href-drop-two').on('click', function() {
    	menu('.href-drop-two');
      $('.two-block-li>.dropdown-child').fadeToggle(800)
  	});

    $('.href-drop-three').on('click', function() {
    	var r = menu('.href-drop-three');
      	$('.three-block-li>.dropdown-child').fadeToggle(800, function() {
      		hoverLogo(r);
      	});
    });

    $('.href-drop-four').on('click', function() {
    	var r = menu('.href-drop-four');
      	$('.four-block-li>.dropdown-child').fadeToggle(800, function() {
      		hoverLogo(r);
      	});
    });

    $('.href-drop-five').on('click', function() {
    	menu('.href-drop-five');
      	$('.five-block-li>.dropdown-child').fadeToggle(800);
    });

});

	function menu(e) {
		var count = 0;
		switch (e) {
		  case '.href-drop-two':
		    $('.logos-href').css('display', 'block');
		    $('.three-block-li>.dropdown-child').fadeOut(800);
		    $('.four-block-li>.dropdown-child').fadeOut(800);
		    $('.five-block-li>.dropdown-child').fadeOut(800);
		    break;
		  case '.href-drop-three':
		    $('.two-block-li>.dropdown-child').fadeOut(800);
		    $('.four-block-li>.dropdown-child').fadeOut(800, function() {
		    	count = 1;
		    });
		    $('.five-block-li>.dropdown-child').fadeOut(800);
		    break;
		  case '.href-drop-four':
		    $('.two-block-li>.dropdown-child').fadeOut(800);
		    $('.three-block-li>.dropdown-child').fadeOut(800, function() {
		    	count = 1;
		    });
		    $('.five-block-li>.dropdown-child').fadeOut(800);
		    break;
		   case '.href-drop-five':
		    $('.logos-href').css('display', 'block');
		    $('.two-block-li>.dropdown-child').fadeOut(800);
		    $('.four-block-li>.dropdown-child').fadeOut(800, function() {
		    	count = 1;
		    });
		    $('.three-block-li>.dropdown-child').fadeOut(800, function() {
		    	count = 1;
		    });
		    break;
		
		}
		return count;

	}

	function hoverLogo(e) {
		var display = $('.logos-href').css('display');
		if(e == 1) {
			if(display == 'none') $('.logos-href').css('display', 'block');
      		else $('.logos-href').css('display', 'none');
		}
	}