Forum Moderators: not2easy
I have a subnav menu with drop down links. As of now, they drop down, but I can't click on them. They vanish when I try to move my mouse over them.
There is a header image right below the subnav. There are a couple of absolute positioned images that are linked to the header, so they don't fly all over the place when the screen is resized.
I have it so the absolute positioned images are floating over my main content, but the main content has a negative top margin so it floats over the header background image.
Layered like this:
BOTTOM: header
MIDDLE: content
TOP: absolute image
If I give the header div a z-index of -1, I'm able to click on the subnav links again. But then the absolute positioned images that are linked to the header get pushed behind my main content, when I want them on top.
Any advice?
CSS
/************************************************
*Header *
************************************************/#header {
width: 975px;
margin: 0px auto 0px;
padding: 0px;
position: relative;
}
#header #imageheader {
background: url(images/logo.png) no-repeat left top;
width: 491px;
height: 260px;
text-indent: -10000px;
}
.ethnic {
width: 250px;
height: 250px;
margin: 0px;
padding: 0px;
position: absolute;
top: 30px;
right: -30px;
z-index: 200;
}
/************************************************
*SubNavbar *
************************************************/
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #FFFFFF;
z-index: 9999;
color: #000000;
width: 140px;
float: none;
margin: 0px;
padding: 6px 10px 6px 10px;
}
#subnav li li a:hover, #subnav li li a:active {
background: #666666;
z-index: 9999;
color: #FFFFFF;
margin: 0px;
padding: 6px 10px 6px 10px;
}
#subnav li ul {
background: #FFFFFF;
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
}
#subnav li li {
}
#subnav li ul a {
width: 140px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
margin: -25px 0 0 166px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover1 ul ul, #subnav li.sfhover1 ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover1 ul, #subnav li li.sfhover1 ul, #subnav li li li.sfhover1 ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover1 {
position: static;
}
/************************************************
*Content *
************************************************/
#content {
width: 975px;
margin: -70px auto 0px;
padding: 0px;
line-height: 17px;
position: relative;
z-index: 4;
}
HTML
<div id="subnavbar">
<ul id="subnav">
<?php wp_list_categories('orderby=name&title_li=&depth=2&exclude=0'); ?>
</ul></div>
</div>
<div id="header">
<div class="headerleft" id="imageheader">
<h1><a href="">Sample</a></h1>
<p>Sample</p></div>
<div class="ethnic"><img src="aztec.png"></div>
</div>
<div id="content">
I created another div called #floatheader and placed it under my main header, then linked my absolute images to it rather than the header. Then used negative positioning to place them over the header and content where I wanted.
Now I can z-index the header to -1 with no problems.
