Menu items hides behind datalist

Question

For some reason my menu dropdown items hide behind my datalist item. i've added z-index to the menu as high as 999 but it didn't helped me.

image here: https://i.stack.imgur.com/Uvsbg.png

I really don't know what causes this issue and i'm pretty new with css and html and so sorry for the messy code! :)

html menu:

<div style="z-index: 9999; display:block;">
    <asp:Menu ID="Menu2" runat="server" DataSourceID="SiteMapDataSource2"
      Orientation="Horizontal" StaticDisplayLevels="2" Font-Bold="True"
           Width="100%" CssClass="menuMan" IncludeStyleBlock="false"
             EnableViewState="false" />
</div>

datalist html:
<asp:DataList ID="dlBreaking" runat="server" Width="1%" Height="1%" 
                 RepeatColumns="1"  
                DataKeyField="Num" OnSelectedIndexChanged="dlBreaking_SelectedIndexChanged"  Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False">
            <ItemTemplate>
                <asp:LinkButton ID="lnkSelect" runat="server" CommandName="select" Font-Underline="false" ForeColor="Black">
                <center>
                <br />
                    <div class="tab3">
                     <table id="dl" style="border-color:#CB0000; background-color:#f1c40f;">
            <tr >
                <td rowspan="2" style="height: 280px;">
                      <asp:Image ID="Image2" runat="server" Width="718px" 
                                            Height="310px" CssClass="auto-style2" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"ImageUrl") %>'
                          GenerateEmptyAlternateText="True" 
                                             />
                </td>
                <td rowspan="2" style="height: 280px; width:20px">
                    <a style="color:transparent">..........</a>
                </td>
                <td style="height: 280px; width: 265px;" rowspan="2">
                    <table style="width: 330px; height: 247px;">
                        <tr>
                            <td style="height: 81px;">
                                 <b style=" font-size:16px" ><%# Eval("CategoryName") %></b>
                            </td>
                        </tr>
                        <tr>
                            <td style="height: 205px;">
                              <b style=" font-size:32px; height:200px;" ><%# Eval("Name") %></b></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
                         </div>
                </center>
                </asp:LinkButton>
            </ItemTemplate>
        </asp:DataList>

some Css:

.tab3 {
    background-color: white;
    border: 10px solid #dfe6e9;    
    position: relative;
    margin: 0 auto;
    z-index: 99;
    }

.tab3:before {
    background: none;
    border: 7px solid #d0d6d8;
    content: "";       
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    pointer-events: none;
    z-index: 99;
    }

 div.menuMan ul {
        background-color: #bdc3c7 /*#bfcbd6*/;
        color: none; /* #465c71; */
        text-decoration: none;
        text-align: right;
        position: relative;
    }

before `z-index` there must be `position` specified in css – ShivCK May 13 '19 at 11:12 — ShivCK, May 13 '19 at 11:12
to what position should i change? and where? – Sabakakado May 13 '19 at 11:54 — Sabakakado, May 13 '19 at 11:54

score 0 · Answer 1 · answered May 13 '19 at 13:01

0

Brother Z-index only works on Position Element Check this Answer

After Adding position give Negative value to the div which you want to show behind.

answered May 13 '19 at 13:01

Toxy

696
5
9

Menu items hides behind datalist

1 Answers1