CSS and menus

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

any solutions?

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.Start Free Trial