jQuery Menu and CSS Frames Overlay

[Curator]

Hello,

Well, although I took two web development courses in University and have a minor in IT, I have no idea what went wrong here. I have a used the jQuerty Multi-Level CSS Menu #2 on a new design for the Museums webpage. The layout for the CSS frames was also taken and modified by me from the Dynamic Drive site under CSS Left, Top, Bottom, and Right. Unfortunately, I can not get the sub-menu's to show up because the main content block is covering it. I have tried various forum suggestions for other menu and CSS problems and I have no idea what it could be.

Here is the Code from the Main Style Sheet that I think applies:

[CODE]

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
font-family: arial;
}

#framecontentLeft{
position: absolute;
top: 0px;
left: 0px;
width: 239px; /*Width of left frame div*/
height: 671px;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: green;
color: white;
}

#framecontentRight{
position: absolute;
top: 0px;
left: 1451px;
right: 0px;
width: 233px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: green;
color: white;
height: 669px;
}

#framecontentTop{
top: -1px;
left: 239px; /*Set left value to WidthOfLeftFrameDiv*/
right: 125px; /*Set right value to WidthOfRightFrameDiv*/
width: 1213px;
height: 169px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: green;
color: white;
position: relative;
z-index: 1000;
}

#framecontentBottom{
position: absolute;
top: 666px;
left: -95px; /*Set right value to WidthOfRightFrameDiv*/
height: 199px; /*Height of bottom frame div*/
bottom: 0;
width: 1839px;
color: white;
background-color: green;
}

#maincontent{
position: absolute;
top: 169px;
left: 239px;
overflow: scroll;
background: #ffffff;
width: 1210px;
height: 500px;
font-family: arial;
z-index: -1;
}

[CODE]

The pages code is located for the moment at:
http://emm.fp.execulink.com/Layout%20Options/layout%20squared.html

A second problem I have is the frames were sized on an 22 inch. screen and were a pain to get where they are now. The problem however is that the whole layout is thrown off on a smaller screen. Viewers of the page will know what I'm talking about.:confused:

Please HELP!! :eek:

Many Thanks.

[Curator]

Can anyone Please Help with this Problem?!?!?!?!?!:eek:

[eriamel]

ok, in your layout.css you wrote:


#framecontentTop{
top: -1px;
left: 239px; /*Set left value to WidthOfLeftFrameDiv*/
right: 125px; /*Set right value to WidthOfRightFrameDiv*/
width: 1213px;
height: 169px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: green;
color: white;
position: absolute;
z-index: 1000;
}

... just remove overflow: hidden; and the menu will behave like you want it to

[Curator]

Thanks so much. I knew the solution was going to be something simple I just didn't read the code close enough. Two pairs of eyes are always better than one. :)