Hurray,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.hpop_item{
background-color: #FFA500;
height: 100px
}
.h_menu_i{
display: block;
width: 25%;
float: left;
}
</style>
</head>
<body>
<nav class="h_menu">
<ul>
<li class="h_menu-now">
<div class="logo">
<a href="/" title="Indian Ocean">
<span>Indian<b>Ocean</b></span>
<p>сайт туристической компании Dek Travel</p>
</a>
</div>
</li>
<li class="h_menu_i h_menu_i-1
"><a href="/seychelles/"><span>Сейшельские</span> острова</a></li>
<li class="h_menu_i h_menu_i-2
"><a href="/mauritius/">остров <span>Маврикий</span></a></li>
<li class="h_menu_i h_menu_i-3
"><a href="/maldives/">острова <span>Мальдивы</span></a></li>
<li class="h_menu_i h_menu_i-4
"><a href="/сountrys/">другие <span>Страны</span></a></li>
</ul>
</nav>
<div style="height: 0px; overflow: hidden; " class="hpop list">
<div style="display: none; opacity: 1;" class="hpop_item">
Выпадающая вкладка 1
</div>
<div style="display: none; opacity: 1;" class="hpop_item">
Выпадающая вкладка 2
</div>
<div style="display: none; opacity: 1;" class="hpop_item">
Выпадающая вкладка 3
</div>
<div style="display: none; opacity: 1;" class="hpop_item">
Выпадающая вкладка 4
</div>
</div>
<script>
var glt;
var $menu = $(".h_menu .h_menu_i")
$menu.mouseenter(function(){
var num = $menu.index(this);
clearTimeout(glt);
glt = setTimeout(function() {
var $item=$(".hpop_item").eq(num);
var he=$item.height();
$(".hpop_item").stop(true,true).fadeOut(100);
$(".hpop").stop().css({height:0}).animate({height:he},300);
$item.stop().fadeIn(300);
}, 500)
});
$(".hpop_item").mouseenter(function(){clearTimeout(glt)})
$(".h_menu .h_menu_i, .hpop_item").mouseleave( function() {
clearTimeout(glt);
glt = setTimeout(function() {
$(".hpop_item").stop(true,true).fadeOut(100);},500)
})
</script>
</body>
</html>