Multi-colored CSS Drop Down Menu

I downloaded a CSS menu from http://css-tricks.com/simple-jquery-dropdowns/ I've modified the code to what's below. The menu works, but I'd like to have the menus be different colors. For example, the first menu would be blue, the second red, and the third green. I've commented where the background colors are, so I know where to change the color, I just can't figure out how to set up different color classes and call them from the HTML. I'm thinking I'm just missing something obvious, but can't quite figure out what I'm supposed to do. Thanks.
/* Menu from http://css-tricks.com/simple-jquery-dropdowns/ */
*
{
    margin: 0;
    padding: 0;
}

ul.dropdown a
{
    text-decoration: none;
}

ul.dropdown
{
    font-size: 10pt;
    font-family: Helvetica, Arial, sans-serif;
    list-style: none;
}

ul.dropdown p
{
    margin: 15px 0;
}

ul.dropdown ul
{
    list-style: none;
}

/* 
	LEVEL ONE
*/
ul.dropdown
{
    position: relative;
}

ul.dropdown li /* THIS IS THE MENU BACKGROUND COLOR */
{
    height: 28px;
    font-weight: bold;
    float: left;
    zoom: 1;
    background: #101a7b;
}

ul.dropdown a:hover
{
    color: #000;
}

ul.dropdown a:active
{
    color: #ffa500;
}

ul.dropdown li a
{
    display: block;
    padding: 4px 8px;
    border-right: 1px solid #333;
    color: #ffffff;
}

ul.dropdown li:last-child a
{
    border-right: none;
} /* Doesn't work in IE */

ul.dropdown li.hover,
ul.dropdown li:hover
{
    background: #878bbd;
    color: black;
    position: relative;
}

ul.dropdown li.hover a
{
    color: #ffffff;
}


/* 
	LEVEL TWO
*/
ul.dropdown ul
{
    /*width: 220px;*/
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
}

ul.dropdown ul li /* THIS IS THE SUBMENU BACKGROUND */
{
    font-weight: normal;
    background: #101a7b;
    color: #000; 
    border-bottom: 1px solid #ccc;
    float: none;
}

/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a
{
    border-right: none;
    /*width: 100%;*/
    display: inline-block;
} 

/* 
	LEVEL THREE
*/
ul.dropdown ul ul
{
    left: 100%;
    top: 0;
}

ul.dropdown li:hover > ul
{
    visibility: visible;
}

Open in new window

<!-- Menu from http://css-tricks.com/simple-jquery-dropdowns/ -->
<ul class="dropdown">
        <li><a href="#">Home</a>
                <ul class="sub_menu" style="width:53px;">
                         <li><a href="#">Home</a></li>
                </ul>
        </li>
        <li><a href="#">The Stories</a>
                <ul class="sub_menu" style="width:250px;">
                        <li><a href="#">What Are The World&#39;s Greatest Stories?</a></li>
                        <li><a href="#">Why Are These Stories Special?</a></li>
                         <li><a href="#">What&#39;s On Each CD?</a></li>
                         <li><a href="#">Awards</a></li>
                </ul>
        </li>
        <li><a href="#">The Artist</a>
                <ul class="sub_menu" style="width:77px;">
                         <li><a href="#">The Artist</a></li>
                </ul>
        </li>
        <li><a href="#">Comments</a>
                <ul class="sub_menu" style="width:155px;">
                         <li><a href="#">What Others Have Said</a></li>
                         <li><a href="#">The Survey</a></li>
                </ul>
        </li>
        <li><a href="#">The Store</a>
                <ul class="sub_menu" style="width:76px;">
                         <li><a href="#">The Store</a></li>
                </ul>
        </li>
        <li><a href="#">Performances</a>
                <ul class="sub_menu" style="width:155px;">
                         <li><a href="#">Live Performances</a></li>
                         <li><a href="#">What Others Have Said</a></li>
                         <li><a href="#">Booking Information</a></li>
                         <li><a href="#">Schedule</a></li>
                </ul>
        </li>
        <li><a href="#">Blog</a>
                <ul class="sub_menu" style="width:140px;">
                         <li><a href="#">Engaging the Culture</a></li>
                </ul>
        </li>
        <li><a href="#">Contact</a>
                <ul class="sub_menu" style="width:108px;">
                         <li><a href="#">Contact Me</a></li>
                </ul>
        </li>
</ul>

Open in new window

LVL 14
quizwedgeAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

baretreeCommented:
what is exactly your need? cause i guess you've already gotten it, if you just want the submenu to display in red instead of blue, then just change the background from blue to red:

ul.dropdown ul li /* THIS IS THE SUBMENU BACKGROUND */
{
    font-weight: normal;
    background: #ff0000;  // or the word red:   background: red;
    color: #000;
    border-bottom: 1px solid #ccc;
    float: none;
}
0
baretreeCommented:
by the way, if that's what you are looking for, then you can add this part on your css section at the end:

            ul.dropdown ul ul li /* THIS IS THE THiRD LEVEL - SECOND SUBMENU BACKGROUND */
            {
                font-weight: normal;
                background:green;
                color: #000;
                border-bottom: 1px solid #ccc;
                float: none;
            }

Open in new window


and then this change on your menu creation (the section to your Performances option) to add a third level - green sub menu:

            <li>
                <a href="#">Performances</a>
                <ul class="sub_menu" style="width:155px;">
                    <li><a href="#">Live Performances</a></li>
                    <li><a href="#">What Others Have Said</a>
                        <ul class="sub_menu" style="width: 140px;">
                            <li><a href="#">SomeGreenMenu1_1</a></li>
                            <li><a href="#">SomeGreenMenu1_2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Booking Information</a>
                        <ul class="sub_menu" style="width: 140px;">
                            <li><a href="#">SomeGreenMenu2_1</a></li>
                            <li><a href="#">SomeGreenMenu2_2</a></li>
                            <li><a href="#">SomeGreenMenu2_3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Schedule</a></li>
                </ul>
            </li>

Open in new window

0
quizwedgeAuthor Commented:
It's not that I want all of them green. I want the first item (Home) to be blue, the second one (The Stories) to be green and the third (The Artist) to be red.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

baretreeCommented:
0
sunu340Commented:
U need to put different classes in different <li> if u want them in different color.As all the <li> u mentioned are in same level so we cannot make any general css.
Try this:
..
<li class="l1"><a href="#">Home</a>
                <ul class="sub_menu" style="width:53px;">
                         <li><a href="#">Home</a></li>
                </ul>
        </li>
        <li class="l2"><a href="#">The Stories</a>
                <ul class="sub_menu" style="width:250px;">
                        <li><a href="#">What Are The World&#39;s Greatest Stories?</a></li>
                        <li><a href="#">Why Are These Stories Special?</a></li>
                         <li><a href="#">What&#39;s On Each CD?</a></li>
                         <li><a href="#">Awards</a></li>
                </ul>
        </li>
        <li class="l3"><a href="#">The Artist</a>
                <ul class="sub_menu" style="width:77px;">
                         <li><a href="#">The Artist</a></li>
                </ul>
        </li>
.. note the class names..

css will be:
ul.dropdown li.l1
{
      background: blue;
}
ul.dropdown li.l2
{
      background: red;
}
ul.dropdown li.l3
{
      background: green;
}

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
quizwedgeAuthor Commented:
Sorry for the delay in responding. It was a crazy work day.

baretree, thanks for the link, but this site is in PHP. I do a bunch of .net work so that might come in handy in the future. Thanks.

sunu340, that was it! Thanks. I just couldn't quite figure out the syntax.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.