First of all, I would like to note that in your case the "house" is not a source in the site map. Although it may be required that it appear visually in this way, semantically it is not. SlickMap understands this (or maybe they were just lucky), so in its html "home" li is on the same page as the other primary pages. The only thing above other pages is the root, which does not have a page (although most people redirect the root to the "home page").
Secondly, after the parent z-index , if the position: absolute not set for the child, and the position: relative not set to the parent, all children are considered to be initial at a level higher than the parent with respect to the stacking order. This is determined in the CSS 2.1 standard under 9.9.1 Specifying the stack level: the "z-index" property as (focus):
The order in which the rendering tree is drawn on the canvas is described in terms of stacking contexts. Stack contexts may contain additional stacking contexts . The stacking context is atomic from the point of view of its parental stacking context; in other contexts, stacking may not occur between any of its cells.
So, so far, SlickMap has been able to tell you:
The first <LI> should be z-index: 2; and should be on top of any other <LI> below.
In your design, this does not matter, because moving the first li up moves all his children with him. And since the children in your home block start their own stacking context one level above the parent, your “home” li can never be higher than the elements inside it.
Now that is not okay. I looked at your code using SlickMap to understand the differences. As you can see below, there is almost one reasonable option here that will be 100% compatible.
z-index supports negative numbers, but since the stacking context is different from "home" and its siblings, you cannot use this here. However, if for each child element "home" is set to position: absolute , and for "home" li set to position: static (default), you can in some cases use z-index: -1 for these children and make them appear for the parent. But you should also have other variables available (for example, the parent parent background is transparent) And , most importantly, you will need to manually arrange each child. Clearly, this is not a good idea. Not to mention the negatives in z-index is a bug in IE6 / 7.
What you need to do, as SlickMap has done, merge the first ul under li containing "home" with ul.level--0 . This will result in the following hierarchy:
ul --Home --Meyers --Another Level --M.... --Another Level --etc
Then you can apply z-index: 2 to "home" li , and you get the result you are looking for. Obviously, changing the structure is likely to require other changes in your styles.
Most likely, some CSS 3 features may help you, but I don’t want to delve into this because I’m not sure about your requirements.
I hope this tutorial in CSS layout strcutres was useful enough for you to make an informed decision about how to move forward with your project. If you have further questions about what I said, just let me know.