Z-index property does not work

Question

here is what i have done:fiddle

the <li id="L1"> is from class active so it has a border-bottom in color white, so i suppose to cover the black border of the div and look like under that <li> there is no border- it dosent do that

the div has the property z-index:-1 and it's position is relative.

why isn't it over? and how do i fix it? Thanks for the help

if you dont mind, update the fiddle with your answer

html:

    <div id='settingNev' style="width:100%; height:100%;" >
<ul style="left:200px; z-index:1px;">
  <li id="L1" class="active" runat="server"><a id="A1" href="../newsFeed/allEr.aspx" runat="server"><span>Er</span></a></li>
   <li id="L2" runat="server"><a id="A2" href="../newsFeed/allEe.aspx" runat="server"><span>Ee</span></a></li>
   <li id="L3" runat="server"><a id="A3" href="#" runat="server"><span>Contact</span></a></li>
   <li id="L4" runat="server"><a id="A4" href="#" runat="server"><span>2</span></a></li>
</ul>
<div style="border-top:1px solid ; position:relative; top:-11px; background-color:white; width:130%; height:60%; z-index:-1"></div>
</div>

css:

#settingNev
{
}
#settingNev ul {
    display:block;
    position:relative;
}
#settingNev ul li {
    display:inline;
    background-color:transparent;
}
#settingNev ul li a {
    display: inline;
    border-radius: 6px 6px 0px 0px;
    color: #666;
    padding: 6px 3px 6px 4px;
    border: 1px solid transparent;
    border-bottom: 1px solid black;
    margin: 1px 0 1px 1px;
}

#settingNev .active a
{
    border: 1px solid black;
    border-bottom: 1px solid white;
    margin: 0;
    padding: 5px 3px;
    background-color:White;
}
#settingNev ul li a:hover {
    border: 1px solid black;
    padding: 6px 3px 6px 4px;
}
#settingNev .active a:hover {
    border: 1px solid black;
    border-bottom: 1px solid white;
    margin: 0;
    padding: 5px 3px;
}

Answer 1

If dont understand if your problem here is why you see the black line across the page. In this case be cafeful because the menu and the black line are not overlapping.

Another thing here I want to point is that your li elements have background-color:transparent; so even if the menu has more z-index, you will see the black line when they overlap with your elements. You will see the difference if you set background color to white and check it out.

As I mentioned, the elements are not overlapping, do this and you will have the selected tab with no black line at the bottom. Now they overlap and you dont see the black line and everything works well.

#settingNev .active a {
    padding-bottom: 6px;
}

Just in case z-index: 1px is not valid, it should be z-index: 1

Answer 2

Note: Updated answer below.

Is this what you are trying to achieve?

http://jsfiddle.net/2fDQz/49/

Changes:

As mentioned, z-index:1px; is not valid.

removed border-bottom: 1px solid black; from <a>

The a:hover should have a z-index greater than the others (set to 2) and a white background (transparent is default)