htmlcssasp.netwebformsaspmenu-control

Can i make Asp.Net Menu Dynamic Items show outside parent DIV without using position: absolute?

i'm having a problem that the dynamic items of the menu are inside the Container div while i need to make them show up outside it without the need to use absolute to asp.net menu

The Main point is that Asp.Net Menu is clipped by so the rest of the dynamic part of the menu is not shown to the user because it is hidden inside the

i hope you understand the code and suggest some solutions to the problem Thanks for any effort

<!-- 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>
Solution

  • the solution to the menu problem was using absolute only this is what i got and problem solved:

    .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>