How to align .submenu and not to be dislocated

See more:

CSS

HTML

jQuery

I want to achieve drop and hide menu effect from http://www.inc.com/
here is fiddle
http://jsfiddle.net/56ThC/1/[^]
how to align it to be at a center of the screen and not to have dislocated .submenu
here is the code


HTML:

<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>

JQERY:

$('.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;
           }

Thanks for your help and time