Click here to Skip to main content
14,826,454 members
Please Sign up or sign in to vote.
4.33/5 (2 votes)
See more:
This is my csss code

when i click on menu items then the menu items lost the css style and
.Menu {
    background-color: red;
    text-align: center;
    height: auto;
    font-size: 12px;

    margin: 0px 0px 2px 0px;

    .Menu ul {
        background-color: blue;
        text-align: center;


        .Menu ul li {
            text-align: center;
            /* set width if needed.*/
            width: 180px;


            .Menu ul li a {
                background: #8a8a8a;
                text-align: left;
                color: black;
                border-radius: 5px 5px 5px 5px;
                padding: 4px 2px 4px 2px;
                padding-left: 8px !important;
                border: 2px solid #646464;
                /*border-bottom: 0;*/


                .Menu ul li a:hover {
                    background-image: none;

                .Menu ul li a:hover {
                    color: black;
            .Menu ul li a {
                color: white;
                align-content: space-between;

.zorder {
#headers {
    width: 1600px;
    margin: 0 auto;
    background-color: gray;
    height: 20px;
    color: White;
    text-align: right;


<asp:Menu ID="HomeMenu" OnMenuItemClick="HomeMenu_MenuItemClick" runat="server" Orientation="Horizontal">
                            <DynamicMenuStyle CssClass="zorder" />
                                <asp:MenuItem NavigateUrl="#" Text="HOME" Value="HOME"></asp:MenuItem>
                                <asp:MenuItem Text="PLAN">
                                    <asp:MenuItem Text="ABP-Proposal">
                                        <asp:MenuItem Text="Head-FA" Value="Head-FA"></asp:MenuItem>
                                        <asp:MenuItem Text="Head-Power" Value="Head-Power"></asp:MenuItem>
                                        <asp:MenuItem Text="Head-HR" Value="Head-HR">
                                            <asp:MenuItem Text="PermanentManPower" Value="PermanentManPower"></asp:MenuItem>
                                            <asp:MenuItem Text="OtherInitiative" Value="OtherInitiative"></asp:MenuItem>
                                        <asp:MenuItem Text="Head-Projects" Value="Head-Projects"></asp:MenuItem>
                                        <asp:MenuItem Text="Head-CA&L" Value="Head-CA&L"></asp:MenuItem>
                                        <asp:MenuItem Text="Head–Strategy&BD" Value="Head–Strategy&BD"></asp:MenuItem>
                                        <asp:MenuItem Text="Head–HSE&Compliance" Value="Head–HSE&Compliance"></asp:MenuItem>
                                        <asp:MenuItem Text="CFO" Value="CFO"></asp:MenuItem>
                                    <asp:MenuItem Text="Circulate Plan" Value="Circulate Plan"></asp:MenuItem>
                                    <asp:MenuItem Text="Consolidate Plan" Value="Consolidate Plan"></asp:MenuItem>
                                    <asp:MenuItem Text="Approve Plan" Value="Approve Plan"></asp:MenuItem>
                                    <asp:MenuItem NavigateUrl="#" Text="CAPEX" Value="CAPEX">
                                        <asp:MenuItem Text="Circulate Capex Targets" Value="Circulate Capex Targets"></asp:MenuItem>
                                        <asp:MenuItem Text="Enter Capex Plan" Value="Enter Capex Plan"></asp:MenuItem>
                                        <asp:MenuItem Text="Capex Approval" Value="Capex Approval"></asp:MenuItem>
                                        <asp:MenuItem Text="Approve Capex Plan" Value="Approve Capex Plan"></asp:MenuItem>
                                        <asp:MenuItem Text="Consolidate - Capex" Value="Consolidate - Capex"></asp:MenuItem>
                                        <asp:MenuItem Text="Approve Consolidate Capex" Value="Approve Consolidate Capex"></asp:MenuItem>
                                        <asp:MenuItem Text="Capex Plan–Link Asset" Value="Capex Plan–Link Asset"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="#" Text="BUDGET" Value="BUDGET">
                                    <asp:MenuItem Text="BudgetPlan" Value="BudgetPlan"></asp:MenuItem>
                                <asp:MenuItem Text="Approve" Value="New Item">
                                    <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>

                                <asp:MenuItem Text="logout" NavigateUrl="~/Login.aspx"></asp:MenuItem>

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900