Asp.net菜单的最后一个子菜单显示在右侧

Question

I am using asp.net menu and is working properly except the last submenu's direction doesn't change from left to right and the content of the submenu is hiding after the edges of my screen. 我正在使用asp.net菜单，并且工作正常，除了上一子菜单的方向未从左向右更改，并且该子菜单的内容隐藏在屏幕边缘之后。

My Master page code 我的母版页代码

 <style type="text/css"> html, body { height: 100%; /* Sets the body to fill the whole screen */ width: 100%; overflow-x: hidden; } #button1 :hover { background-color: black; color: White; } #button2 { color: white; background: red; } .shadBrd1 { background: url( '../Images/en-us/SiteShad1.gif' ) repeat-y right 50%; } .shadBrd2 { background: url( '../Images/en-us/SiteShad2.gif' ) repeat-y left 50%; text-align: left; } .ftrArea { background: #c8c8c8 url( '../Images/ftrBg.gif' ) repeat-X right top; margin-top: 10px; height: 29px; width: 74%; text-align: center; bottom: 0px; } .mainTbl { margin-left: auto; margin-right: auto; width: 955px; border-collapse: collapse; margin-top: 0px; margin-bottom: 0px; bottom: 0px; height: 100%; } .bodyhd { text-align: center; margin-bottom: 2px; margin-top: 0px; } #form1 { height: 100%; } #form2 { height: 229px; width: 974px; margin-bottom: 0px; } a:link { text-decoration: none; font-size: ١٠px; font-family: Tahoma; color: #595959; border: 0px; } .style8 { } .style9 { height: 132px; } .style10 { font-size: smaller; height: 75%; direction: rtl; bottom: 0px; text-align: center; margin-top: 0px; margin-bottom: 0px; padding: 0px; } .style11 { height: 29px; text-align: center; bottom: 0px; margin-top: 10px; margin-bottom: 0px; background: #c8c8c8 url('../Images/ftrBg.gif') repeat-X right top; } .style12 { } .style14 { color: #CC3300; font-size: 11px; font-family: Verdana; } .copyR { font-family: Verdana; font-size: x-small; font-weight: 700; } #Progress_bar { position: absolute; left: 40%; top: 50%; margin-top: -30px; /* make this half your image/element height */ margin-left: -30px; /* make this half your image/element width */ color: #CC3300; } </style>

 <body> <form id="form1" runat="server"> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true"></asp:ToolkitScriptManager> <div style="height: 100%;"> <table class="mainTbl" style="width: 1000px; text-align: right; height: 100%;" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td bgcolor="White" rowspan="8" valign="top" class="shadBrd2"> <img alt="" src="../Images/en-us/SiteShad2.gif" style="width: 20px; height: 26px" /> </td> <td style="text-align: left" class="style8" colspan="2"></td> <td bgcolor="White" rowspan="8" valign="top" class="shadBrd1"> <img alt="" src="../Images/en-us/SiteShad1.gif" style="width: 20px; height: 26px" /> </td> </tr> <tr> <td style="text-align: right" class="style12"> </td> <td style="text-align: left"> <strong><span class="style14"></span> &nbsp; &nbsp;</strong> </td> </tr> <tr> <td class="style9" colspan="2"> <img alt="" src="../Images/header_img.jpg" style="width: 1000px;" /> </td> </tr> <tr> <td id="div_Menu" bgcolor="#1C5E55" class="style8" colspan="2" style="height: 25px;"> <div style="background-position: center;"> <asp:Menu ID="NavigationMenu" CssClass="menu" DynamicHorizontalOffset="1" StaticSubMenuIndent="1px" DataSourceID="MenuSource" MaximumDynamicDisplayLevels="4" Orientation="Horizontal" runat="server" StaticDisplayLevels="2" Font-Bold="True" Font-Overline="False" StaticEnableDefaultPopOutImage="true" IncludeStyleBlock="false" ItemWrap="True" RenderingMode="List" StaticPopOutImageUrl="../Images/down.gif" OnMenuItemDataBound="NavigationMenu_MenuItemDataBound" > </asp:Menu> <asp:SiteMapDataSource ID="MenuSource" runat="server" ShowStartingNode="true" StartFromCurrentNode="false" /> </div> </td> </tr> <tr> <td colspan="2"> </td> </tr> <tr class="bodyhd" valign="top"> <td class="style10" colspan="2"> <asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server"> </asp:ContentPlaceHolder> <div style="background-color: #1C5E55; font-size: large; color: White"> <asp:UpdateProgress ID="MainProgress" DisplayAfter="1" runat="server"> <ProgressTemplate> <div id="ProgressDiv"> يرجى الانتظار للتحميل.... </div> </ProgressTemplate> </asp:UpdateProgress> </div> </td> </tr> <tr> <td class="style11" colspan="2"> <asp:Label ID="lblCopyright" runat="server" meta:resourcekey="lblCopyrightResource1" CssClass="copyR"> </asp:Label> &nbsp; </td> </tr> </table> </div> </form>

i have used "overflow-x: hidden;" 我用过“ overflow-x：隐藏”； in html, body to hide the unnecessary white space with horizontal scrollbar at leftside. 在html中，正文使用左侧的水平滚动条隐藏不必要的空白。 and before that the submenu was visible when i scroll to left but the space with scrollbar was never ending.it was going very long. 在此之前，当我向左滚动时该子菜单可见，但是带有滚动条的空间永无休止。

my image link is here http://i59.tinypic.com/2zqdiy1.jpg 我的图片链接在这里http://i59.tinypic.com/2zqdiy1.jpg

i dont have reputation so it is not allowing me to post image here. 我没有声誉，所以不允许我在这里发布图片。

 My Menu Code is like this <tr> <td id="div_Menu" bgcolor="#1C5E55" class="style8" colspan="2" style="height: 25px;"> <div style="background-position: center;"> <asp:Menu ID="NavigationMenu" CssClass="menu" DynamicHorizontalOffset="1" StaticSubMenuIndent="1px" DataSourceID="MenuSource" MaximumDynamicDisplayLevels="4" Orientation="Horizontal" runat="server" StaticDisplayLevels="2" Font-Bold="True" Font-Overline="False" StaticEnableDefaultPopOutImage="true" IncludeStyleBlock="false" ItemWrap="True" RenderingMode="List" StaticPopOutImageUrl="../Images/down.gif" OnMenuItemDataBound="NavigationMenu_MenuItemDataBound" > </asp:Menu> <asp:SiteMapDataSource ID="MenuSource" runat="server" ShowStartingNode="true" StartFromCurrentNode="false" /> </div> </td> </tr>

and the css 和CSS

 div.menu { background-color: #1C5E55; } /* To avoid flickering of asp.ne menu A52A2A*/ /* *************************/ div.menu > ul > li { display: inline-block; list-style: none; } div.menu ul li ul { display: none; } /* *************************/ div.menu ul { background-color: #1C5E55; list-style: none; margin: 0px; padding: 0px; width: auto; font-size: 14px; font-family: Arial, Verdana; font-weight: 600; z-index: 999; } div.menu ul li a, div.menu ul li a:visited { /*background-color: #5c5c5c;*/ border-bottom: 1px #5c5c5c solid; color: white; display: block; line-height: 1.35em; padding: 4px 20px; text-decoration: none; white-space: nowrap; } div.menu ul.level1 { border-bottom: 0; } div.menu ul li a:hover { /* background-color: #bfcbd6; color: #465c71;*/ background-color: #84BF99; color: #FFFFFF; text-decoration: none; } div.menu ul li a:active { background-color: #465c71; color: #cfdbe6; text-decoration: none; } div.menu ul li a { display: block; padding: 0 20px; margin: 0px 0; line-height: 35px; line-height: 2em; text-decoration: none; border-right: 1px solid Gray; } ul > li:first-child a { border: none; } div.menu ul li a.level1 { border-bottom: none; } div.menu ul li a.level2 { border-bottom: none; } div.menu ul li a[title] { border-bottom: none; } /* to manipulate dropped menu*/ div.menu ul li ul li a { font-size: 16px; font-family: Arial, Verdana; font-weight: 600; }

Please help me. 请帮我。 i am struck into it. 我被打中了。

I have asked the same question here http://forums.asp.net/t/2037911.aspx?Asp+net+menu+submenu+problem but i didn't get any answer. 我在这里问过同样的问题http://forums.asp.net/t/2037911.aspx?Asp+net+menu+submenu+problem，但是我没有得到任何答案。

Answer 1

sorry guys, i would have tried bit more before posting here. 抱歉，我会在发布之前尝试更多。

i have solved by adding these lines to my navigation menu css 我已经通过将这些行添加到导航菜单css中来解决了

ul:first-child > li:last-child ul.level4 { margin-right:-300px } ul：first-child> li：last-child ul.level4 {margin-right：-300px}

Asp.net菜单的最后一个子菜单显示在右侧

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-03-01 08:23:15

Asp.net菜单的最后一个子菜单显示在右侧

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-03-01 08:23:15

解决方案1
0 已采纳 2015-03-01 08:23:15