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


i'm having problem dynamic items of menu inside container div while need make them show outside without need use absolute asp.net menu

the main point asp.net menu clipped rest of dynamic part of menu not shown user because hidden inside

i hope understand code , suggest solutions problem 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> 

the solution menu problem using absolute got , problem solved:

.adminmenustyle {     background-color: black;     position: absolute; }      .adminmenustyle {         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> 

Comments

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

[C++][SFML 2.2] Strange Performance Issues - Moving Mouse Lowers CPU Usage -

ios - Possible to get UIButton sizeThatFits to work? -