Ext Js BorderLayout North Region Panel dropdown menus not shown due to Center Region

Hi

My Ext Js BorderLayout North Region has a HTML CSS menu, when I hover the mouse the dropdown menu is coming but it is not shown due to Center Region. I tried tweaking z-index, overflow by verifying sencha forums but it is not working. Can any one help me. Here is my code

Code:

this.navigationStr =
                '<div class="main_menu" style="z-index:20000;">'+
                '<ul>'+
                    '<li><a href="#">Home</li>'+
                    '<li><a href="#">Menu1</a>'+
                        '<ul><li><a href="#">SubMenu1</a></li>'+
                        '</ul></li>'+
                    '<li><a href="#">Menu2</li>'+
                    '<li><a href="#">Menu3</li>'+
                    '<li><a href="#">Menu4</li>'+
                    '<li><a href="#">Menu5</li>'+
                '</ul>'+
                '</div>';
                
this.centerLayout = new Ext.create('Ext.panel.Panel',{
                region: 'center',
             renderTo:Ext.getBody(),
             id: 'mainLayoutPanel',            
             border: false,
             layout: 'card',
             items: [ this.homePanel,                                            
                      {
                          xtype : "component",
                          itemId: 'reportMgmtPanel',
                          autoEl : {
                              tag : "iframe",
                              src : "/jsp/myView.jsp?t="+(new Date()).getTime()
                          }
                      }
                      ]
         });




                


this.mainViewport = Ext.create('Ext.container.Viewport',{
             layout: 'border',
             renderTo:Ext.getBody(),
             items: [{
                 region: 'north',
                 id: 'page-header-panel',                        
                 html:  
                 //some html code divs and table tags etc
                    '<div class="headingBar"> '+
                        this.navigationStr +
                    '</div>',                    
                 border: false,
                 margins: '0 0 5 0'
             },this.centerLayout]

And My CSS is as follows

Code:

.main_menu
{
    height:30px;
    line-height:30px;
    color:#FFF;
  /*   position:relative; */
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
   
}
.main_menu ul
{
    padding:0px;
    margin:0;
    list-style:none;    
    position: absolute;
    z-index : 99999;
}
.main_menu ul li
{
    padding:0;
    margin:0;
    border-right:1px solid #000000;
    float:left;
    background:#333333;
/*     z-index:9999; */
}
.main_menu ul li a
{
    color:#FFF;
    display:block;
    text-decoration:none;
    padding:0 25px;
}
.main_menu ul li a:hover
{
    background:#3ea5ea;
    color:#000;
}
.main_menu ul li ul
{
     display: none; 
     width: auto;
     /* position:relative; */
     top:30px;
     padding:0px;
     margin:0px;
     /* z-index:9999; */
}
.main_menu ul li:hover ul
{
     display: block;
     /* position: absolute; */
     margin: 0;
     padding: 0; 
     /* z-index:9999; */
}
.main_menu ul li:hover li
{
    float: none;
    list-style:none;
    margin:0px;
}
.main_menu ul li:hover li
{
    background:#333;
    border-top:1px solid #000000;
}
.main_menu ul li:hover li a
{
    color: #fff;
    padding:0 20px;
    display:block;
    width:170px;
}
.main_menu ul li li a:hover
{
    color:#000;
}


.north, .north .x-panel-bwrap, .north .x-panel-body {
            overflow: visible !important;
        }