My problem is that this is built using a normal box-model setup and for the life of me I cannot figure out how to get the CSS menu to sit above the Magenta colored box with the drop-downs. If you hover over ‘Boosters’ you will see some sub items that sit under the Magenta box versus being over it. Typically I use these using Absolute positioning, but in this instance I have drop-downs too and so I’m not up for guessing percentages and what not.
Is there, hopefully, a solution? Is it even possible to do this?
I would say that your allotted block size is too small for the drop downs. If they were wider the text would never reach the pink bar because there would be fewer lines. Have you tried setting the z-index manually on the menu?
Looking at this in the Safari Web Inspector shows seemingly conflicting info. The code listing on the left shows the menu bar with z-index set at 999, but the inspector shows on the right z-index of 1.
This demo is more or less just an example and I plan to convert and slim out the code for another site. I just can’t seem to get that menu to sit over the magenta bar there.
I was looking at this too and the z-index of 999 is bogus as it has been added as an extended attribute. The browser is ignoring it as it should be a style on the div and not an attribute in itself;
<div style="z-index:999">
Looking at the page code I can see that the menu and text panel both share the same parent item (item5) which means the last item will typically display over the first. Insert the panel and menu the other way around (panel first and then the menu) and set their styles so that they appear on the page the other way around.
For example set the top of item3 (the text panel) to 150px so it displays below the menu. Also if you set the overflow of item2 to visible then the sub menus won’t get clipped by this parent container.
Regards,
Tim.
On 16 Nov 2010, at 23:29, chuckamuck wrote:
Looking at this in the Safari Web Inspector shows seemingly conflicting info. The code listing on the left shows the menu bar with z-index set at 999, but the inspector shows on the right z-index of 1.