2012-09-20 182 views
0

我有一個ASP.NET菜單apage。在用戶導航應用程序並點擊後,讓我說,10/15鏈接在其渲染行爲改變的菜單上。ASP.NET菜單渲染

Afeter隨機點擊導航,它開始以這種方式呈現:鏈接了一點,沒有風格

enter image description here

然後,後半秒的樣式應用和菜單看起來不錯:

enter image description here

這不好!

菜單標記定義如下liket這樣的:

   <asp:Menu ID="FrontEndMenu" CssClass="FrontEndMenuStyle" 
         StaticEnableDefaultPopOutImage="False" Font-Size="14px" 
         Orientation="Horizontal" runat="server" StaticDisplayLevels="1" > 
        <StaticMenuItemStyle HorizontalPadding="6px" VerticalPadding="10px"/> 
        <DynamicHoverStyle BackColor="LightGreen"/> 
        <DynamicMenuItemStyle BorderColor="white" BorderStyle="Solid" BorderWidth="1px" CssClass="DynamicMenu" /> 
        <Items> 
         <asp:MenuItem Text="Armonizzazione"> 
           <asp:MenuItem NavigateUrl="CalibrazioneRating.aspx?figura=BHR" Text="Rating"></asp:MenuItem> 
           <asp:MenuItem NavigateUrl="CalibrazioneRating.aspx?figura=AC1" Text="Conferma Rating"></asp:MenuItem> 
         </asp:MenuItem>       
         <asp:MenuItem Text="Calibrazione"> 
           <asp:MenuItem NavigateUrl="CalibrazioneRanking.aspx?figura=BHRL" Text="Ranking"></asp:MenuItem> 
           <asp:MenuItem NavigateUrl="CalibrazioneRanking.aspx?figura=AC2" Text="Conferma Ranking"></asp:MenuItem> 
         </asp:MenuItem> 
         <asp:MenuItem NavigateUrl="Approvatore.aspx" Text="Approvazione"></asp:MenuItem> 
         <asp:MenuItem NavigateUrl="ElencoSchede.aspx?tipo=personali" Text="Schede personali"></asp:MenuItem> 
         <asp:MenuItem NavigateUrl="ElencoSchede.aspx?tipo=dacompilare" Text="Schede da Completare"></asp:MenuItem> 
         <asp:MenuItem NavigateUrl="ElencoSchede.aspx?tipo=definitive" Text="Schede definitive"></asp:MenuItem> 
         <asp:MenuItem NavigateUrl="Ranking.aspx" Text="Distribuzione Delle Valutazioni"></asp:MenuItem> 
        </Items> 
       </asp:Menu> 

,相對CSS是:

.DynamicMenu 
{ 
    color: white; 
    display: block; 
    font-family: Tahoma, Arial, Verdana, Helvetica; 
    font-size: 14px; 
    font-weight: bold; 
    width: 150px; 
    padding: 5px; 
    border-width: 1px !important; 
    border-color: white !important; 
    border-style: solid !important; 
    background-color: #76c773; 
    text-align: left !important; 
} 

.DynamicMenuHover 
{ 
    text-decoration: underline; 
} 

.FrontEndMenuStyle ul li ul 
{ 
    display: none; 
} 

.FrontEndMenuStyle > ul > li 
{ 
    position: relative; 
    float: left; 
    list-style: none; 
} 

你能幫幫我嗎?

回答

1

您的HTML正在加載和應用CSS之前呈現。

您可以通過將包裝元素的默認CSS可見性設置爲像display:none;這樣隱藏來避免這種情況。然後,您可以使用連接到DOM加載事件的JavaScript,並將包裝元素的顯示設置爲block