Why is menu hiding in IE10

I have a button which when clicked show a menu using menuShow function. The menu has a treepanel which has many parent nodes and child nodes. The problem is when we click on expand arrow of any parent child the function menuHide() gets called and instead of expanding the menu collapses. The problem is specific to IE9/10 and it is working fine with Chrome.

The piece of code for button is :

'Ext.button.Button', {

width : 300,

height : 30,

styleHtmlContent: 'true',

style :{

'background-color': '#EBEBEB',

'color':'#000000'

},

text: '<span class="Copy" style="color:#000000"><I>Click to select a scenario<I></span>',



listeners : {

menuHide : function(btn, menu, opts)

{

//logic }

},

menuShow : function(btn, menu, opts)

{

//logic

}



},

menu : {

xtype : 'menu',

styleHtmlContent : 'true',

width : 300,

style :{

'border': '0px solid #FFFFFF'

},

shadow : false,

items : [{

xtype: 'label',

width : 250,

text: 'click here'

},

{

xtype : 'treepanel',

autoScroll : 'true',

itemId : 'treePanelID',

height: 190,

width : 270,

store : this.store,

style : {

'font-family': 'Helvetica Neue,Arial',

'font-style': 'normal',

'text-decoration': 'none',

'font-size': '18px',

'font-weight': 'bold',

'line-height': '20px',

'letter-spacing': '0px'

},

useArrows : true,

preventHeader:true,

rowLines : true,

columnLines : false,

border : 0,

margin : '-20 0 0 15',

enableColumnResize : true,

enableColumnMove : false,

header : false,

columns: [{

xtype : 'treecolumn',

dataIndex : 'text',

menuDisabled : true,

width : 100,

flex : 1,

renderer : function(value, values,record)

}],

listeners : {

itemclick : function( record, index, eOpts ){

if(index.isLeaf()){

logic }

else{

logic

}

}

} }]

}



}