Hover menu not working with Firefox and Internet explorer

#menu
{
width:38px;
height:33px;
overflow:hidden;
position:relative;
z-index:3;  

  
float:right;

/* CSS3 transition */
-moz-transition-property: height; /* Firefox 4 */
-moz-transition-duration: 1s; /* Firefox 4 */
-webkit-transition-property: height; /* Safari and Chrome */
-webkit-transition-duration: 1s; /* Safari and Chrome */
-o-transition-property: height; /* Opera */
-o-transition-duration: 1s;
    top: 2px;
    left: 0px;
}    

#menu:hover
{
height:220px;
}



#menu:hover > #share
{
height:33px;
width:33px;    
background-image: url('../iconsimg/sharee.png);
background-repeat:no-repeat;
}        

#share
{    
height:33px;
width:33px;
background-image: url('../iconsimg/sharee.png');
background-repeat:no-repeat;
cursor:pointer;
float:right;
position:relative;
}    

.ico1
{
height:33px;
width:33px;
float:right;
background-image:url('../iconsimg/fbook.png');
background-repeat:no-repeat;
cursor:pointer;
position:relative;

}

.ico1:hover
{
background-image:url('../iconsimg/fbookhov.png');
background-repeat:no-repeat;

}


.ico3
{
height:33px;
width:33px;
background-image:url(../iconsimg/gplus.png);
background-repeat:no-repeat;
float:right;
cursor:pointer;
position:relative;
}    

.ico3:hover
{
background-image: url(../iconsimg/gplushov.png);
background-repeat:no-repeat;
}

.ico4
{
height:33px;
width:33px;
background-image:url(../iconsimg/twitt.png);
background-repeat:no-repeat;
float:right;
cursor:pointer;
position:relative;
}    

.ico4:hover
{
background-image:url(../iconsimg/twitthov.png);
background-repeat:no-repeat;
}

<div id="menu">
<div id="share">
</div>

<a href="whatever you want">
<div class="ico1">
</div>
</a>
<a href="whatever you want">
<div class="ico2">
</div>
</a>
<a href="whatever you want">
<div class="ico3">
</div>
</a>
<a href="whatever you want">
<div class="ico4">
</div>
</a>
</div>