How Do I Bring The Dropdown Menu In Front Of Other Graphic?

HTML & CSS
1

Here is a link to the page in question. The top left has a button called “Chamber of Commerce”. When the client rolls over the button, it is showing the first dropdown button, “About the Chamber” underneath the graphic which reads Communities. This doesn’t happen on my Mac. The client is on a PC using IE. Can someone take a look and propose an explanation and/or solution?

LINK-
http://www.andersoncountychamber.org/index3.html

Thanks in advance. Todd

2

Hello Todd :),

The problem is that on “#subnavContainer” you give a position:relative; and IE is placing that on top of the dropdown. To fix you could either remove the position:relative on that element, or add it to #sidebar and give it a higher z-index (z-index needed since it comes before the #subnavContainer in the HTML :))


#sidebar
{
  position:relative;
  z-index:1;
}
3

So the order of items on the page is dictating the z-index order? Would the illustration below be rendered like this?

<wrapper>
<main>
<right></right>
<left></left>
</main>
</wrapper>

wrapper, z-index:1
main, z-index:2
left, z-index:4
right, z-index:3

4

Lol no. All z-index’s not set are reverted to z-index:auto, except in IE where the default is 0 wrongly (this is when an element has a position, like relative/absolute/fixed BTW).

In auto z-index, the element coming later in the HTML will be stacked on top. However in IE, they need hte parent set in order for it to appear on top (not the nested dropdown or whatever you had z-index on before)

That is why the outer parent, aka #sidebar needed position:relative and since it came before the top horizontal navbar it needed a z-index otherwise it wouldn’t appear on top of it :).

Sorry if that sounded confusing.