One issue with your submenus is that they are not direct children of the top menu, causing the 'mouseout' event to trigger whenever you move the mouse out of the menu.
To resolve this, I have fixed your HTML, Javascript, and CSS while also cleaning up some code. Here are examples of the improvements: (http://jsfiddle.net/56ThC/1/).
<body>
<div class="block">
<div class="box" id="1">
menu1
<div class="submenu" id="1">
<div class="box2">item1_1</div>
<div class="box2">item1_2</div>
<div class="box2">item1_3</div>
<div class="box2">item1_4</div>
<div class="box2">item1_5</div>
</div>
</div>
<div class="box " id="2">
menu2
<div class="submenu" id="2">
<div class="box2">item2_1</div>
<div class="box2">item2_2</div>
<div class="box2">item2_3</div>
<div class="box2">item2_4</div>
<div class="box2">item2_5</div>
</div>
</div>
<div class="box" id="3">
menu3
</div>
<div class="box" id="4">
menu4
</div>
<div class="box" id="5">
menu5
</div>
</div>
Javascript:
$('.submenu').hide();
$(".box").hover(function(){
$(this).find(".submenu").stop().fadeToggle(700);
});
CSS:
.block{
width: 615px;
border: solid 1px #aaa;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.box{
width: 100px;
height: 50px;
border: solid 1px #ccc;
display: inline-block;
vertical-align: middle;
}
.submenu{
width: 615px;
height:300px;
position:absolute;left:8px;top:60px;
border: solid 1px #aaa;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.box2{
width: 200px;
height: 200px;
border: solid 1px #ccc;
display: inline-block;
vertical-align: middle;
}
I hope these changes prove helpful!