CSS, drop down and transparency problem

I have a drop down list and I have a footer, when I pull down the drop down list... the footer always is in front of the list blocking the view, how can I eliminate this:

My css for the footer is:

#footer {
    height:45px;
    padding:10px 0;
    position:relative;
}
#footer .inner {
    position:relative;
    z-index:2;
}
#ie6 #footer .inner {
}
#footer .bg {
    background:url("http://jqueryui.com/images/footer_bg.png") no-repeat scroll left top transparent;
    height:65px;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:1;
}
#ie6 #footer .bg {
    background:none repeat scroll 0 0 transparent;
}
#footer p {
    color:#5E5E5E;
    font:9px 'Arial','Helvetica',sans-serif;
    margin:0;
    padding:0;
    text-transform:uppercase;
}
#footer p a {
    color:#BBBBBB;
}
#footer span.first {
    display:block;
    float:left;
    padding:6px 0 0 16px;
}
#footer .block {
    display:block;
    float:left;
}
#footer .block span, #footer span.empty {
    display:none;
}
#footer .liferay {
    background:url("http://jqueryui.com/images/icon_liferay.gif") repeat scroll 0 0 transparent;
    border:0 none;
    height:22px;
    margin:3开发者_如何学JAVApx 10px 0;
    width:98px;
}
#footer .filamentgroup {
    background:url("../images/oracle.png") ;
    border:0 none;
    height:18px;
    margin:3px 22px 0 3px;
    width:90px;
}

and here's the actual footer code:

Set your menu's z-index style higher than your footer's. I can only see footer styles there so we can't know which styles have you applied to your popup menu.