Solved

How do i change the background color of my [sub] menu items?

Posted on 2014-03-31
5
794 Views
Last Modified: 2015-03-10
How do I place ID names or class (or CssClass) names within my menu and sub menu items to change the background colors? I'm open to any method (including inline) that will allow me to change the background color. I'm including my HTML code. [ASP .NET 3.5]

<asp:Menu ID="DropDownMenu" runat="server" Orientation="Horizontal" CssClass="SubDropDownMenu">
                            <DynamicHoverStyle BackColor="Green" />
                            <Items>
                                <asp:MenuItem Text="Home" Value="Item1"/>
                                <asp:MenuItem Text="About Us" Value="Item2" NavigateUrl="~/AboutUs.aspx">
                                    <asp:MenuItem Text="Mission" Value="Sub Item1" NavigateUrl="~/Mission.aspx"></asp:MenuItem>
                                    <asp:MenuItem Text="History" Value="Sub Item2"></asp:MenuItem>
                                    <asp:MenuItem Text="Staff" Value="Sub Item3"></asp:MenuItem>
                                    <asp:MenuItem Text="Accomplishments" Value="Sub Item4"></asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="Classes Info" Value="Item2">
                                    <asp:MenuItem Text="Tiny tot" Value="Sub Item1"></asp:MenuItem>
                                    <asp:MenuItem Text="Pre School" Value="Sub Item2"></asp:MenuItem>
                                    <asp:MenuItem Text="Beginner" Value="Sub Item3"></asp:MenuItem>
                                    <asp:MenuItem Text="Intermediate" Value="Sub Item4"></asp:MenuItem>
                                    <asp:MenuItem Text="Boys Gymnastics" Value="Sub Item5"></asp:MenuItem>
                                    <asp:MenuItem Text="Tumbling" Value="Sub Item6"></asp:MenuItem>
                                    <asp:MenuItem Text="Tuition" Value="Sub Item4"></asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="Clompetitive Teams" Value="Item2">
                                    <asp:MenuItem Text="USAG Compulsory" Value="Sub Item1"></asp:MenuItem>
                                    <asp:MenuItem Text="USAG Optional" Value="Sub Item2"></asp:MenuItem>
                                    <asp:MenuItem Text="Recreational" Value="Sub Item3"></asp:MenuItem>
                                    <asp:MenuItem Text="League" Value="Sub Item4"></asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="Activities" Value="Item2">
                                    <asp:MenuItem Text="Birthday Parties" Value="Sub Item1"></asp:MenuItem>
                                    <asp:MenuItem Text="Parents Nite Out" Value="Sub Item2"></asp:MenuItem>
                                    <asp:MenuItem Text="RecreatiOpen Gymonal" Value="Sub Item3"></asp:MenuItem>
                                    <asp:MenuItem Text="Sleepovers" Value="Sub Item4"></asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="Special Events" Value="Item2">
                                    <asp:MenuItem Text="K C Classic American Princess Meet" Value="Sub Item1"></asp:MenuItem>
                                    <asp:MenuItem Text="Santa Invitationa Meet/Show" Value="Sub Item2"></asp:MenuItem>
                                    <asp:MenuItem Text="Field Trips" Value="Sub Item3"></asp:MenuItem>
                                    <asp:MenuItem Text="Daycares" Value="Sub Item4"></asp:MenuItem>
                                    <asp:MenuItem Text="Camps" Value="Sub Item5"></asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="Links" Value="Item2">
                                    <asp:MenuItem Text="USA Gymnastics" Value="Sub Item1"></asp:MenuItem>
                                    <asp:MenuItem Text="MO USAG" Value="Sub Item2"></asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="Contact Us" Value="Item2" NavigateUrl="~/kcgymnastics.com/ContactUs.aspx">
                                </asp:MenuItem>
                            </Items>
                        </asp:Menu>

Open in new window

0
Comment
Question by:mikesExpertExchange
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 26

Expert Comment

by:Alan Warren
ID: 39968426
Hi mikesExpertExchange

Try adding a style block in the head section of the page
  <style type="text/css">
    #DropDownMenu ul ul li {
      background-color:red;
    }
  </style>

Open in new window

Respectfully yours,
Alan
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 39968460
I've tried:

    <style type="text/css">
        #DropDownMenu ul ul li,
        .SubDropDownMenu ul ul li,
        .ctl00_DropDownMenu_0 ul ul li,
        #ctl00_DropDownMenu ul ul li
        {
            background-color: #930790;
        }
    </style>

but none of these seem to work. what am i doing wrong?
0
 
LVL 26

Accepted Solution

by:
Alan Warren earned 500 total points
ID: 39968477
Hi mikesExpertExchange,
this is probably a better example which you could adapt to suit
<%@ Page Language="VB" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <style type="text/css">
    .level1
    {
        color: white;
        background-color: black;
        font-variant: small-caps;
        font-size: large;
        font-weight: bold;
        padding: 0 8px;
    }

    .level1:hover
    {
        background-color: yellow;
    }

    .level2
    {
        color: blue;
        font-family: Gill Sans MT !important;
        font-size: medium;
        background-color:gray;
        padding-left:12px;
    }
    .level2:hover
    {
        background-color:green;
    }


    .level3
    {
        color: black;
        background-color: silver;
        font-family: Gill Sans MT !important;
        font-size: small;
        padding: 0 4px;
    }
    .level3:hover
    {
        background-color: orange;
    }

    .level4
    {
        background-color: gray !important;
        color: White !important;
        font-size: small;
        padding: 0 4px;
    }   
    .level4:hover
    {
        background-color: violet;
    }

  </style>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:Menu ID="DropDownMenu" runat="server" Orientation="Horizontal"  >
        <LevelMenuItemStyles>
            <asp:MenuItemStyle CssClass="level1"/>
            <asp:MenuItemStyle CssClass="level2"/>
            <asp:MenuItemStyle CssClass="level3" />
            <asp:MenuItemStyle CssClass="level4" />
          </LevelMenuItemStyles>
        <Items>
            <asp:MenuItem Text="Home" Value="Item1"/>
            <asp:MenuItem Text="About Us" Value="Item2" NavigateUrl="~/AboutUs.aspx">
                <asp:MenuItem Text="Mission" Value="Sub Item1" NavigateUrl="~/Mission.aspx"></asp:MenuItem>
                <asp:MenuItem Text="History" Value="Sub Item2"></asp:MenuItem>
                <asp:MenuItem Text="Staff" Value="Sub Item3"></asp:MenuItem>
                <asp:MenuItem Text="Accomplishments" Value="Sub Item4"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Classes Info" Value="Item2">
                <asp:MenuItem Text="Tiny tot" Value="Sub Item1"></asp:MenuItem>
                <asp:MenuItem Text="Pre School" Value="Sub Item2"></asp:MenuItem>
                <asp:MenuItem Text="Beginner" Value="Sub Item3"></asp:MenuItem>
                <asp:MenuItem Text="Intermediate" Value="Sub Item4"></asp:MenuItem>
                <asp:MenuItem Text="Boys Gymnastics" Value="Sub Item5"></asp:MenuItem>
                <asp:MenuItem Text="Tumbling" Value="Sub Item6"></asp:MenuItem>
                <asp:MenuItem Text="Tuition" Value="Sub Item4"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Clompetitive Teams" Value="Item2">
                <asp:MenuItem Text="USAG Compulsory" Value="Sub Item1"></asp:MenuItem>
                <asp:MenuItem Text="USAG Optional" Value="Sub Item2"></asp:MenuItem>
                <asp:MenuItem Text="Recreational" Value="Sub Item3"></asp:MenuItem>
                <asp:MenuItem Text="League" Value="Sub Item4"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Activities" Value="Item2">
                <asp:MenuItem Text="Birthday Parties" Value="Sub Item1"></asp:MenuItem>
                <asp:MenuItem Text="Parents Nite Out" Value="Sub Item2"></asp:MenuItem>
                <asp:MenuItem Text="RecreatiOpen Gymonal" Value="Sub Item3"></asp:MenuItem>
                <asp:MenuItem Text="Sleepovers" Value="Sub Item4"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Special Events" Value="Item2">
                <asp:MenuItem Text="K C Classic American Princess Meet" Value="Sub Item1"></asp:MenuItem>
                <asp:MenuItem Text="Santa Invitationa Meet/Show" Value="Sub Item2"></asp:MenuItem>
                <asp:MenuItem Text="Field Trips" Value="Sub Item3"></asp:MenuItem>
                <asp:MenuItem Text="Daycares" Value="Sub Item4"></asp:MenuItem>
                <asp:MenuItem Text="Camps" Value="Sub Item5"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Links" Value="Item2">
                <asp:MenuItem Text="USA Gymnastics" Value="Sub Item1"></asp:MenuItem>
                <asp:MenuItem Text="MO USAG" Value="Sub Item2"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Contact Us" Value="Item2" NavigateUrl="~/kcgymnastics.com/ContactUs.aspx">
            </asp:MenuItem>
        </Items>
      </asp:Menu>     
    </div>
    </form>
</body>
</html>

Open in new window

Respectfully yours,
Alan
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 39971200
@Alan: This is something that I can work with so thank you. Last question, I haven't worked with HTML much in the last couple of years so I'm a bit confused, as to why there seems to be "extra" <td> elements in the HTML of my menu (in fire fox firebug). They are creating space[more space than I want] between the horizontal items in my main menu (level 1) . I don't see them in the raw HTML that i wrote to create the menu so i'm just a bit confused as to where they are coming from. I'm including pics to help explain.

extra <td> tag 1
extra <tag> 2
                        <asp:Menu ID="DropDownMenu" runat="server" Orientation="Horizontal">
                            <%--<DynamicHoverStyle BackColor="Green" />--%>
                            <LevelMenuItemStyles>
                                <asp:MenuItemStyle CssClass="level1" />
                                <asp:MenuItemStyle CssClass="level2" />
                                <asp:MenuItemStyle CssClass="level3" />
                                <asp:MenuItemStyle CssClass="level4" />
                            </LevelMenuItemStyles>
                            <Items>
                                <asp:MenuItem Text="Home" Value="Item1" />
                                <asp:MenuItem Text="About Us" Value="Item2" NavigateUrl="~/AboutUs.aspx">
                                    <asp:MenuItem Text="Mission" Value="Sub Item1" NavigateUrl="~/Mission.aspx"></asp:MenuItem>
                                    <asp:MenuItem Text="History" Value="Sub Item2"></asp:MenuItem>
                                    <asp:MenuItem Text="Staff" Value="Sub Item3"></asp:MenuItem>
                                    <asp:MenuItem Text="Accomplishments" Value="Sub Item4"></asp:MenuItem>
                                </asp:MenuItem>
                            </Items>
                        </asp:Menu>

Open in new window

0
 
LVL 1

Author Closing Comment

by:mikesExpertExchange
ID: 40657111
Thank you.
0

Featured Post

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
In this video, viewers are given an introduction to using the Windows 10 Snipping Tool, how to quickly locate it when it's needed and also how make it always available with a single click of a mouse button, by pinning it to the Desktop Task Bar. Int…
Michael from AdRem Software explains how to view the most utilized and worst performing nodes in your network, by accessing the Top Charts view in NetCrunch network monitor (https://www.adremsoft.com/). Top Charts is a view in which you can set seve…

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question