Why is my CSS styled menu lining vertically(for a fraction of second when page is loading) and then displays horizontally in asp.net?

I am using CSS to style my menu.
I don't know why my  menu lining vertically(for a fraction of second when page is loading) and then displays horizontally like how it is supposed to do. why is it doing like this? I don't what this to happenning?


    padding: 4px 0px 4px 8px;

div.menu ul
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;

div.menu ul li a, div.menu ul li a:visited
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;

div.menu ul li a:hover
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;

div.menu ul li a:active
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
Who is Participating?
KrummelzConnect With a Mentor Commented:
This happens because the menu was made with UL tags, which are used for lists. The "list-style: none;" is what makes it change to be horizontal. If you would rather not have it change while the page is loading, you should then re-create the menu without using UL tags. I recommend a DIV with other DIV tags inside.
AppDevsAuthor Commented:
This is my ASPX code:
Can you please help me to modify it?
<div class="clear hideSkiplink">
                <asp:LoginView ID="NavbarLogin" runat="server" EnableViewState="false">
                                <asp:Menu ID="Navigation" Orientation="Horizontal" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false">
                                        <asp:MenuItem NavigateUrl="Home.aspx" Text="Home" ToolTip="My personal home page"/>
                                                                                                                        <asp:MenuItem NavigateUrl="javascript:void(0);" Text="Second Page" ToolTip="Second Page">
                                                                                                                                    <asp:MenuItem Text="Show my page" Value="Show my page" ToolTip="My page" NavigateUrl="SecondPage.aspx"></asp:MenuItem>
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.