<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function()
{
//Hide SubLevel Menus
$('#header ul li ul').hide();
//OnHover Show SubLevel Menus
$('#header ul li').hover(
//OnHover
function() {
//Hide Other Menus
$('#header li ul').not($('ul', this)).stop(true, true);
// Show Hoved Menu
$('ul', this).delay(5000).slideDown(); //5 сек задержка перед открытием
},
//OnOut
function() {
// Hide Other Menus
$('ul', this).stop(true, true).slideUp();
//Remove the Arrow
$('ul li.arrow', this).remove();
}
);
}
);
</script>
</head>
<body id="header">
<ul >
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
</ul>
</li>
</ul>
</body>
</html>