• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 469
  • Last Modified:

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?

CSS
div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    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;
}
0
AppDevs
Asked:
AppDevs
1 Solution
 
KrummelzCommented:
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.
0
 
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">
                            <ContentTemplate>
                                <asp:Menu ID="Navigation" Orientation="Horizontal" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false">
                                    <Items>
                                        <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>
                                    </Items>
                                </asp:Menu>
                            </ContentTemplate>
                                   </asp:LoginView>
            </div>
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now