ShopSite Forums

I am having trouble getting a css menu to overlap the content on a page using the curved templates. I have #maincell at 1120px and #content at 980px. The menu is in #contentleft at 200 px and #contentmiddle is 560px. I thought if I made #contentleft a higher z-index and lowered the others and used position: relative;, then it would work.

But I have tried increasing the z-index of #contentleft and reducing or removing the z-index of #maincell and #content but there is no apparent change. Any suggestions as to what area to concentrate on would be welcome. Thank you.


#maincell {
position: relative;
z-index:1;
width: 1120px;
margin: 0 auto;
text-align: center;
padding: 10px 0 0 0;
top: -130px;
background-image: url(http://nrcsports.accountsupport.com/store/media/storefront/bg-middle_1020.png);
background-position: top center;
background-repeat: repeat-y;

}
#storename {
margin: 0 auto 5px auto;
width: 980px;
}
#storename h1 {
text-align: left;
margin: 0 0 10px 40px;
font-family: tahoma;
font-size: 16pt;
}
#content {
position: relative;
z-index:1;
width: 980px;
margin: 0 auto;
text-align: left;
}
#contentleft {
position: relative;
z-index:1000;
width: 200px;
float: left;
overflow: hidden;
}
#contentmiddle {
position: relative;
z-index:1;
width: 560px;
margin: 0 10px;
float: left;
overflow: hidden;
}
#contentmiddle h1 {
position: relative;
margin: 0px;
font-family: arial;
font-size: 13px;
border-bottom: 1px solid [-- VAR.LinkColor --];
}
#contentright {
position: relative;
width: 200px;
float: right;
overflow: hidden;
}
#contentleft h3, #contentright h3 {
position: relative;
font-family: arial;
font-size: 11px;
display: block;
height: 32;
background-image: url([-- ShopSite_Images --]/backgrounds/curved/header3.png);
background-color: [-- VAR.LinkColor --];
background-repeat: no-repeat;
background-position: top center;
line-height: 30px;
text-align: center;
font-weight: bold;
color: #FFFFFF;
margin: 0px;
}
.boxedin {
margin: 0 1px 8px 1px;
border-left: 1px solid #[-- STORE.SC_ShadeColor --];
border-right: 1px solid #[-- STORE.SC_ShadeColor --];
border-bottom: 1px solid #[-- STORE.SC_ShadeColor --];
padding: 5px;
position: relative;
z-index:1000;
}

Whats the URL to your website so that I can take a look at this?

Here is the latest version of my test page. Thank you. http://www.nrcsports.com/store/aa_test.html

This is because in the CSS, the contentleft and li.link have "overflow: hidden;" If you remove this, it should fix the issue.

I had tried removing that at one point in the contentleft but not the li.link. Thank you!