ASP.NET Menu rendering

Question

I have apage with an ASP.NET menu on it. After the user navigate the application and click, let me say, 10/15 link on the menu its render behaviour changes.

Afeter random clicks navigation, it start to render in that way: the link a little and with no style

then, after an half second the style is applied and the menu looks good:

This is not good!

The menu markup definition looks liket this:

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

and the relative CSS are:

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

Can you please help me?

Answer 1

Your HTML is rendering before the CSS is loaded and applied.

You could avoid this by setting the default CSS visibility for the wrapper element to hidden like display:none;. Then you can use a JavaScript that wires up to the DOM load event and sets the display of the wrapper element to block.