0

我有一个带有 ASP.NET 菜单的页面。在用户导航应用程序并单击菜单上的 10/15 链接后，其呈现行为会发生变化。

在随机点击导航后，它开始以这种方式呈现：链接有点，没有样式

在此处输入图像描述

然后，半秒后应用样式并且菜单看起来不错：

在此处输入图像描述

不是很好！

菜单标记定义看起来像这样：

                <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;
}

你能帮我么？

4

1 回答 1

1

您的 HTML 在加载和应用 CSS 之前呈现。

您可以通过将包装元素的默认 CSS 可见性设置为 hidden like 来避免这种情况display:none;。然后，您可以使用连接到 DOM 加载事件的 JavaScript 并将包装器元素的显示设置为block.

于 2012-09-20T13:32:59.260 回答