Jquery dropdown menu is covered by a frame on a webpage

I'm using a using this jquery dropdown menu in my banner frame (mail_frame.html). when it drops down it gets covered by another frame that's below it. even though i set the z-index of the drop down to 999 in it's css, it's still behind the other frame

frameset.jsp

</head>
    <frameset id="frameMain" rows="84,*" framespacing="0">
       <frame src="mail_frame.html" id="mail" name="mail" frameborder="0" border="0" marginwidth="0" 开发者_开发百科marginheight="0" noresize="noresize" scrolling="no"/>
       <frameset id="frameSet" cols="126,*" framespacing="0">
           <frame src="leftNavigation.do?loadWelcome=true<%= currentURL %>" id="leftnav" name="leftnav" frameborder="0" border="0" marginwidth="0" marginheight="0" noresize="noresize" scrolling="no"/>
           <frame src="empty.htm" id="main" name="main" frameborder="0" border="0" noresize="noresize" scrolling="yes"/>
       </frameset>
    </frameset>
</html>

how can i make it drop down on top of everything

Classic frames (what you're using) are completely independent windows. You can't have an element in one frame that then extends over the content of another frame. You can do that with iframes, but not with the kind you're using.

It may be time to consider moving to a frameless layout, as that's the direction the technology seems to be going. For instance, neither frame nor frameset is part of HTML5. As an alternative, you can use ajax (an increasingly outdated name, as I suspect most people are using it with JSON instead of XML now) to update individual elements within a page.