[RESOLVED]Center Text Menu Control Hover

<div class="post-text" itemprop="description">

New to asp.net and I am trying to center the hover portion of my menu control but for the life of me I cannot figure it out. When it isn’t hovered over, its centered, and when I hover over it the text moves to the left.

Here is my code:

<aside>
        <nav>
            <asp:Menu ID="Menu" runat="server" DataSourceID="SiteMapDataSource1" DynamicEnableDefaultPopOutImage="False" Orientation="Horizontal"
                RenderingMode="Table" backcolor="#CB4154" ForeColor="white" Font-Bold="True" >
            <StaticMenuItemStyle HorizontalPadding="8px" VerticalPadding="2px" />
            <StaticMenuStyle height="25px" Width="800px" />
            <StaticSelectedStyle HorizontalPadding="8px" VerticalPadding="2px" />
            <StaticHoverStyle Font-Bold="True" height="75%" width="50%" backcolor="#00B7EB" ForeColor="White" CssClass="StaticHoverStyle"/>
        </asp:Menu>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
        </nav>
    </aside>

And the CSS:

#Menu {
    text-align: center;
    margin-right:auto;
    margin-left: auto;
}

.StaticHoverStyle {
    text-align: center;
}

Any input on what I am doing wrong would be appreciated.

</div>

Try This:

 <style>
        #Menu {
            text-align: center;
            margin-right: auto;
            margin-left: auto;
        }
         #Menu .StaticHoverStyle {
            text-align: center;
            margin-right: auto;
            margin-left: auto;
        }

       
    </style>

Leave a Reply