我可以在不使用位置的情况下使 Asp.Net 菜单动态项显示在父 DIV 之外：绝对吗？答案

【问题标题】：Can i make Asp.Net Menu Dynamic Items show outside parent DIV without using position: absolute?我可以在不使用位置的情况下使 Asp.Net 菜单动态项显示在父 DIV 之外：绝对吗？
【发布时间】：2015-05-19 03:45:34
【问题描述】：

我遇到了一个问题，即菜单的动态项在容器 div 内，而我需要让它们显示在它外面而不需要使用绝对到 asp.net 菜单

主要的一点是 Asp.Net 菜单被剪裁了，因此菜单的其余动态部分不会显示给用户，因为它隐藏在

我希望你理解代码并提出一些解决问题的方法感谢您的努力

<!-- language: lang-html -->

        <!DOCTYPE html>

        <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
            <head runat="server">
                <link href="StyleSheet/MainStyleSheet.css" rel="stylesheet" />
                <link href="Content/themes/base/all.css" rel="stylesheet" />
                <link href="Content/themes/smoothness/jquery-ui.smoothness.css" rel="stylesheet" />
                <link href="StyleSheet/jquery-ui-timepicker-addon.css" rel="stylesheet" />

                <script src="Scripts/jquery-2.1.3.js"></script>
                <script src="Scripts/jquery-ui-1.11.4.js"></script>
                <script src="Scripts/jquery.ui.datepicker-ar.js"></script>
                <script src="Scripts/jquery-ui-timepicker-addon.js"></script>

    <style type="text/css">
        html,body, form {
            font-family: AmiriWeb, 'Amiri QuranWeb', Amiri, Arial;
            direction: rtl;
            overflow-x: hidden;
        }

        input, textarea, select {
            font-family: AmiriWeb, 'Amiri QuranWeb', Amiri, Arial;
            direction: rtl;
        }

        .Container {
            width: 1000px;
            margin: 0px auto;
            direction: rtl;
            overflow: hidden;
        }

        .TdGeneralStyle {
            padding: 10px 10px 10px 10px;
        }

        .AdminMenuStyle{
            background-color: black;
        }

        .AdminMenuStyle a{
            color: lightgreen;
            display: block;
            font-weight: bold;
            padding: 10px;
            width: 100%;
            background-position: 14% center !important;
        }

        .AdminMenuStyle ul, .AdminMenuStyle li{
            background-color: black;
            border: 1px solid #F75D59;
        }
         .AdminMenuStyle ul:hover, .AdminMenuStyle li:hover{
            background-color: #F75D59;
        }

        .AdminStaticMenuStyle{
            width: 100% !important;
        }

        .AdminDynamicMenuStyle{
            width: 180px !important;
        }
    </style>
            </head>
            <body>
                <form id="form1" runat="server">
                    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                    <div class="Container">
                        <table style="border: 5px solid green; border-collapse: collapse; width: 100%;">
                <tr style="background-color: green; ">
                    <td style="width: 20%; color: yellow; font-weight: bold; " class="TdGeneralStyle">إسم المستخدم </td>
                    <td style="width: 80%; " class="TdGeneralStyle"></td>

                </tr>
                <tr>
                    <td style="width: 20%; background-color: black; vertical-align: top;">
                        <asp:Menu ID="Menu1" CssClass="AdminMenuStyle" Width="100%" runat="server" StaticPopOutImageUrl="~/AppItems/AppImages/PalFlagIconMenu.png" DynamicPopOutImageUrl="~/AppItems/AppImages/PalFlagIconMenu.png" MaximumDynamicDisplayLevels="5">
                            <DynamicMenuStyle CssClass="AdminDynamicMenuStyle" />
                            <Items>
                                <asp:MenuItem Text="المقالات" Value="المقالات">
                                    <asp:MenuItem Text="جديد" Value="جديد" NavigateUrl="~/Admin/ArticlesAdmin/AddArticle.aspx"></asp:MenuItem>
                                    <asp:MenuItem Text="تعديل" Value="تعديل"></asp:MenuItem>
                                    <asp:MenuItem Text="الكاتب" Value="الكاتب">
                                        <asp:MenuItem NavigateUrl="~/Admin/WriterAdmin/AddWriter.aspx" Text="جديد" Value="جديد"></asp:MenuItem>
                                        <asp:MenuItem Text="تعديل" Value="تعديل"></asp:MenuItem>
                                    </asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="مستخدم" Value="مستخدم">
                                    <asp:MenuItem Text="جديد" Value="جديد"></asp:MenuItem>
                                    <asp:MenuItem Text="تعديل" Value="تعديل"></asp:MenuItem>
                                    <asp:MenuItem Text="تغيير الكلمة السرية" Value="تغيير الكلمة السرية"></asp:MenuItem>
                                </asp:MenuItem>
                            </Items>
                            <StaticMenuStyle CssClass="AdminStaticMenuStyle" />
                        </asp:Menu>
                    </td>
                    <td style="width: 80%; vertical-align: top;" class="TdGeneralStyle" >
                        <asp:ContentPlaceHolder ID="cphDefaultAdminMasterPageBody" runat="server">
                        </asp:ContentPlaceHolder>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="border-top: 5px solid green; font-weight: bold; text-align: center; background-color: green; color:yellow;">
                        2015
                    </td>
                </tr>
            </table>
                    </div>
                </form>
            </body>
            </html>

【问题讨论】：

标签： html css asp.net webforms aspmenu-control

【解决方案1】：

菜单问题的解决方案是使用绝对，这就是我得到的并且问题解决了：

.AdminMenuStyle {
    background-color: black;
    position: absolute;
}

    .AdminMenuStyle a {
        color: lightgreen;
        display: block;
        font-weight: bold;
        padding: 10px;
        width: 100%;
        background-position: 14% center !important;
    }

    .AdminMenuStyle ul, .AdminMenuStyle li {
        background-color: black;
        border: 1px solid #F75D59;
        width: 100% !important;
    }

        .AdminMenuStyle ul:hover, .AdminMenuStyle li:hover {
            background-color: #F75D59;
        }

.AdminStaticMenuStyle {
}

.AdminDynamicMenuStyle {
}


<script>
        function fixMenuBackContainerHeight() {
            var menuObject = $('#<%= mAdminMenu.ClientID  %>');
            var tdMenuContainer = $('#tdMenuContainer');
            var menuHeight = menuObject.height();
            tdMenuContainer.css("min-height", menuHeight);
            menuObject.width(tdMenuContainer.width());
        }

        $(function () {
            fixMenuBackContainerHeight();
        });
    </script>

【讨论】：