I have an ASP.Net menu. I have a horizontal bar and an image right after it. THe problem is it's displaying the child items behind the image and bar. How can I bring it to the front. I also tried z:index, but that didn't work.

 

This is the image of the problem:

 

http://img138.imageshack.us/img138/7668/err2gy3.jpg

 

This is the code:

 

<div id="styletwo" style="left: 220px; width: 728px; top: -22px; z-index: 101;">

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" style="z-index: 201; left: 6px; position: relative; top: 5px">

<Items>

<asp:MenuItem Text="Home" Value="Home" Selected="True" NavigateUrl="~/Home.aspx"></asp:MenuItem>

<asp:MenuItem Text="Assets" Value="Assets" NavigateUrl="~/frm_assets.aspx"></asp:MenuItem>

<asp:MenuItem Text="Purchase" Value="Purchase"></asp:MenuItem>

<asp:MenuItem Text="Contracts" Value="Contracts"></asp:MenuItem>

<asp:MenuItem Text="Admin" Value="Admin" NavigateUrl="~/frm_admin.aspx"></asp:MenuItem>

<asp:MenuItem Text="Reports" Value="Reports" NavigateUrl="~/frm_reports.aspx">

<asp:MenuItem Text="System" Value="System"></asp:MenuItem>

<asp:MenuItem Text="Laptop" Value="Laptop"></asp:MenuItem>

<asp:MenuItem Text="Server" Value="Server"></asp:MenuItem>

<asp:MenuItem Text="Printer" Value="Printer"></asp:MenuItem>

<asp:MenuItem Text="Projector" Value="Projector"></asp:MenuItem>

<asp:MenuItem Text="UPS" Value="UPS"></asp:MenuItem>

</asp:MenuItem>

<asp:MenuItem Text="Support" Value="Support"></asp:MenuItem>

<asp:MenuItem Text="Logout" Value="Logout" NavigateUrl="~/login.aspx"></asp:MenuItem>

</Items>

</asp:Menu>

 

</div>

 

 

. . .and this is the css:

 

#styletwo

{

position:relative;

display:block;

height:24px;

font-size:11px;

font-weight:bold;

background:transparent url(images/bgOFF.gif) repeat-x top left;

font-family:Verdana;

}

 

#styletwo tr

{

margin:0;

padding:0;

list-style-type:none;

width:100%;

}

 

#styletwo tr td

{

display:block;

float:left;

margin:0 1px 0 0;

}

 

#styletwo tr td a

{

display:block;

float:left;

color:#000;

text-decoration:none;

padding:0px 15px 0 20px;

height:24px;

}

 

#styletwo tr td a:hover,#styletwo tr td a:active

{

display:inline-block;

color:#fff;

background:transparent url(images/bgON.gif) repeat-x bottom right;

}

 

 

Also I'd like the on hover block to cover the whole block not leave some gap at the top as shown in the pic.

 

Any solutions?

This happens for all browsers?

I know there is some bug related to this issue for IE.

It certainly seems like a z-index issue.

As Tom Hanks mentioned, there is a bug in IE concerning z-index.

A great explanation of the problem can be found here.