Dropdown-Menu with delayed hover effect #js #css #html

index.html

<div class="menu">
	<a href="#">Menüpunkt</a>
	<ul>
		<li>
			<a href="#">Untermenüpunkt</a>
			<ul>
				<li>Unteruntermenüpunkt</li>
				<li>Unteruntermenüpunkt</li>
				<li>Unteruntermenüpunkt</li>
			</ul>
		</li>
		<li>
			<a href="#">Untermenüpunkt</a>
			<ul>
				<li>Unteruntermenüpunkt</li>
				<li>Unteruntermenüpunkt</li>
				<li>Unteruntermenüpunkt</li>
			</ul>
		</li>
		<li>
			<a href="#">Untermenüpunkt</a>
			<ul>
				<li>Unteruntermenüpunkt</li>
				<li>Unteruntermenüpunkt</li>
				<li>Unteruntermenüpunkt</li>
			</ul>
		</li>
	</ul>
</div>

script.js

$(document).ready(function() {
	$( ".menu > ul > li" ).hover(function() { 
		var self = this;
		window.setTimeout(function() {
			if( $(self).hasClass('hover-init') ) {
				$('.menu .hover').removeClass('hover');
				$(self).addClass('hover');
			}
		},1000);
		$(this).addClass('hover-init');
	}, function() {
		var self = this;
		window.setTimeout(function() {
			if( $(self).hasClass('hover') && !$(self).hasClass('hover-init') ) { $(self).removeClass('hover'); }
		},1000);			
		$(this).removeClass('hover-init');
	});

});	

style.css

.menu {
    width:200px;
}
.menu > ul > li {
    border:1px solid red;
	position:relative;
}
.menu > ul  > li > ul {
    display:none;
    position:absolute;
    top:0;
    left: 100%;
    width:200px;
    border:1px solid blue;
}
.menu > ul  > li > ul.hover,
.menu > ul  > li.hover > ul {
    display:block;
}