Пункты меню прячутся за даталистом - PullRequest
Новая
       25

Пункты меню прячутся за даталистом

0 голосов
/ 13 мая 2019

Почему-то мои выпадающие пункты меню прячутся за моим списком данных.я добавил z-index в меню до 999, но это мне не помогло.

изображение здесь: https://i.imgur.com/O3UkhZm.png

Я действительно не знаю, что вызывает эту проблему, и я довольно новичок в css и html, и мне очень жаль за грязный код!:) 

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>

некоторые 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;
    }

1 Ответ

0 голосов
/ 13 мая 2019

Brother Z-index работает только при проверке элемента позиции это ответ

После добавления позиции задайте отрицательное значение div, за которым вы хотите показать.

...