How to make each drop down a different color?

I'm looking to do a menu similar to this: http://www.cca.edu/ and I can't figure out how to make each drop down a different color? Any help or resources greatly appreciated!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style>
ul.MenuBarHorizontal li#yellow ul a,
ul.MenuBarHorizontal li#yellow a:hover, ul.MenuBarHorizontal li#yellow a:focus,
ul.MenuBarHorizonta li#yellow a.MenuBarItemHover, ul.MenuBarHorizontal li#yellow a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#yellow a.MenuBarSubmenuVisible {
    background-color: #FF6;
    color: #333;
ul.MenuBarHorizontal li#yellow ul a:hover, ul.MenuBarHorizontal li#yellow ul a:focus,
ul.MenuBarHorizonta li#yellow ul a.MenuBarItemHover, ul.MenuBarHorizontal li#yellow ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#yellow ul a.MenuBarSubmenuVisible {
    background-color: #FF0;
    color: #333;
ul.MenuBarHorizontal li#red ul a,
ul.MenuBarHorizontal li#red a:hover, ul.MenuBarHorizontal li#red a:focus,
ul.MenuBarHorizonta li#red a.MenuBarItemHover, ul.MenuBarHorizontal li#red a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#red a.MenuBarSubmenuVisible {
    background-color: #F30;
    color: #333;
ul.MenuBarHorizontal li#red ul a:hover, ul.MenuBarHorizontal li#red ul a:focus,
ul.MenuBarHorizonta li#red ul a.MenuBarItemHover, ul.MenuBarHorizontal li#red ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#red ul a.MenuBarSubmenuVisible {
    background-color: #F00;
    color: #333;
ul.MenuBarHorizontal li#blue ul a,
ul.MenuBarHorizontal li#blue a:hover, ul.MenuBarHorizontal li#blue a:focus,
ul.MenuBarHorizonta li#blue a.MenuBarItemHover, ul.MenuBarHorizontal li#blue a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#blue a.MenuBarSubmenuVisible {
    background-color: #6CC;
    color: #333;
ul.MenuBarHorizontal li#blue ul a:hover, ul.MenuBarHorizontal li#blue ul a:focus,
ul.MenuBarHorizonta li#blue ul a.MenuBarItemHover, ul.MenuBarHorizontal li#blue ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#blue ul a.MenuBarSubmenuVisible {
    background-color: #00F;
    color: #333;
ul.MenuBarHorizontal li#pink ul a,
ul.MenuBarHorizontal li#pink a:hover, ul.MenuBarHorizontal li#pink a:focus,
ul.MenuBarHorizonta li#pink a.MenuBarItemHover, ul.MenuBarHorizontal li#pink a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#pink a.MenuBarSubmenuVisible {
    background-color: #F99;
    color: #333;
ul.MenuBarHorizontal li#pink ul a:hover, ul.MenuBarHorizontal li#pink ul a:focus,
ul.MenuBarHorizonta li#pink ul a.MenuBarItemHover, ul.MenuBarHorizontal li#pink ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#pink ul a.MenuBarSubmenuVisible {
    background-color: #F36;
    color: #333;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="yellow"><a class="MenuBarItemSubmenu" href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
</li>
<li id="red"><a href="#">Item 2</a></li>
<li id="blue"><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
</li>
<li id="pink"><a href="#">Item 4</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Gramps

Similar Messages

How to make chooser drop down menu, Example i want choices 1 or 2 or 3 from the drop down menu or Location , Egypt , USA , Canda

how to make chooser drop down menu, Example i want choices 1 or 2 or 3 from the drop down menu or Location , Egypt , USA , Canda

Hello,
Where do you want to insert it in Muse. Do you want to add this in Muse Form widget then you can use the widget mentioned in the link below.
Forms+ Bundle Widget – Widgets.Mu
If you want to insert it anywhere else in Muse and if you have the HTML codes for that then you can insert its codes in page from Object > Insert HTML.
You may also require to use some java scripts to make them working as expected.
How to Make JavaScript Dropdown List - YouTube
Regards
Vivek

How to make dynamical drop down menu?

I am trying to make a drop down menu which is dynamical in dreamweaver? is there a way to do that? i am not good at programming.

Here are links to a couple of tutorials for this:
http://www.roscripts.com/Building_a_dynamic_drop_down_menu-216.html
http://www.finalwebsites.com/tutorials/dynamic-navigation-list.php

How to make three drop downs in DW and link with paypal?

I have this tiresome question to which I have been looking for a solution. The solution is easy but somehow my brain synapses don't work there.
DreamWeaver + Paypal.
My form has 3 dropdowns
First is primary color - red , green etc- Visitor chooses one.
Then How does he get linked to the second dropdown form- Secondary colors- red blue green etc-
After he chooses the secondary color and Then he needs to choose the third dropdown- size -
AFTER that he presses the paypal button.
Now please can some altruistic soul give me a solution of can this be done through Dw? (3 forms+paypal)
What would you suggest- radio buttons or drop down menu?
Can all three forms be linked to paypal in one go itself? (primary color+ secondary color + size?)
Naturally I will have to make paypal forms for each color, but is there any easy way?
Also is there any way in which pressing on a button brings up an image?
If you have been patient enough to read this and can help me, I'll be so indebted to you!
Thanks,

This is called 'Dependant Dropdown' or 'Cascading Dropdown'.
There's a beautiful jQuery plugin you can use to get this done.
Download plugin here: https://github.com/dnasir/jquery-cascading-dropdown
Demo(s) here: http://dnasir.com/github/jquery-cascading-dropdown/demo.html

How To Make Interactive Drop Down Text Boxs??

As many may know from my recent posts, I am pretty new to this whole design thing. I'm getting a pretty good hang of most things, but now I've reached a point where I am trying to create some interactive features.
I have a page in an iPad magazine whish is a full page photo. What I want to do is have a couple of buttons in random places on the photo that when tapped/pressed/pushed, roll out a drop down text box and when tapped/pushed/pressed again, rolls up the text box. I'm not sure what this is called or how to do it so any help is much appreciated.
I should be able ot figure it out for myself if someone can give me a general idea of what this sort of item is called and the general steps involved.
Thanks for the help

You might want to try Multi State Objects (Object States).
One state should be an empty frame and the other state a text box.
The buttons get the action "Go To State" so you can switch to diffent Object States when you tap on them.
If you're really looking for a way to make it interactive (HTML dropboxes), you might want to use HTML(5) and include it in DPS as Web Content.

How to make a drop down list default to a blank space

I have a drop down list
<cfselect name="EmployeeName" query="getname"
value="EmployeeName" selected=" "></cfselect>
I want the list to default to a blank space, can this be
done?
If so, how?

I figured out a way to do it, except now I ran into another
problem. The way I have it set up, i can't make it required now.
Any ideas?
<cfselect name="EmployeeName" query="getname"
value="EmployeeName" required="yes" message="Please select your
name">
<option value="" selected="selected"></option>
</cfselect>

A simple process I just don't know - how to make one drop down list dependent on another.

Drop-Down List One has 17 office names. Drop-Down List Two has sub-office names associated with each of the 17 main offices. If user selects Office 3 from Drop Down List One, only sub-offices associated with Office 3 should appear as choices in Drop-Down List Two. How do I do that?

You have asked your question in the Adobe Reader user forum.
You cannot do what you want with Adobe Reader. Adobe Reader is a PDF viewer - no more, no less.
You need Acrobat.
The Acrobat user forums are at:
https://forums.adobe.com/community/acrobat
Be well...

How to make animated drop down menu responsive?

Hi
I've made an animated drop down menu in Edge Animate. It works fine at 945px wide with drop downs coming from 4 of the links. When the window is resized to 700px I want to reduce the 8 top links down to 4 and have longer drop downs and the same again at 400px wide. How do I do this as Edge has no media queries. do I use symbols?
Thanks.

Hi garyt88,
Found something that could help although I have to admit that I have not tried it myself.
Adobe Edge HTML5 Interactive Drop-Down Menu Tutorial - YouTube
Thanks,
Preran

How to make conditional drop down menus

I am working on a quick wireframe and would like to user to be able to choose 1 of 4 selection from 5 different drop down menus. Based on the configuration of the 5 menus, I'd like it to take them to a page displaying separate instructions.
So:
Drop down A, selection 1.
Drop down B, selection 2.
Drop down C, selection 1
Drop down D, selection 3
Drop down E, selection 4.
This combination takes them to page 2. A difference selection (e.g., 13114) would take them to a different page.
Any ideas?

iBod wrote:
Hi,
Try [this|http://www.manytricks.com/menubartint>.
Thanks, but this is only for changes to the menu bar, not the menus themselves. Although, one of the suggestions, [Menu Bar Tint|http://www.manytricks.com/blog/?id=21], looks interesting.
Chris

I need help. how to make vertical drop down menu

I need help. I want on my site to make navigation as such on this site http://www.website24.eu/einstieg/. if you can help me and explain how?

like this http://www.jqueryrain.com/?3khGEoMY

How to make hidden Drop Lists functional in RBList Subforms?

I have created a form that contains 3 isolated Radio Button lists, each with hidden subforms that are unique per each button.
Two of my RBLists and subforms work perfectly, showing hidden Drop Down List options and other fields as they should when a button is selected.
However, RBList3 presents the Drop Down lists as user entry fields only. Each hidden subform in RBList3 contains one drop down menu and one text box for instructions.
I've used the same javascript to hide/show hidden fields when buttons are selected. All settings seem to match up. Here is a sample of my code:
if(RBList3.F.rawValue != 2)
    this.presence = "hidden";
    newsubform.presence = "hidden";
else if(RBList3.F.rawValue == 2)
    this.presence = "visible";
    newsubform.presence = "hidden";
Does anyone have any suggestions for how to make my Drop Down Lists in RBList3 show as functional Drop lists?
I have attached the form for reference.

See example #62 on my blog for a 10.1.3 example:
http://tinyurl.com/smuench-adf-examples
For a tutorial on how to create them using the new features we enable in 11g, see my Oracle Magazine article:
Defining Cascading List of Values

How do I make a drop down list of text in numbers as it is made in the example spreadsheet for comparing cars for buying where you can choose a value from a dropdown list for each car?

how do I make a drop down list of text in numbers as it is made in the example spreadsheet for comparing cars for buying where you can choose a value from a dropdown list for each car?

Where is this example spreadsheet? Without seeing it I can only guess at what you are asking.
To make a drop-down list (a pop-up menu in Numbers-speak), format the cell as a pop-up then edit and add to the list of items.
If the example spreadsheet is pulling in a dollar value based on what car you chose in the pop-up, it is probably using LOOKUP or one of the other lookup functions, getting the information from another table (a lookup table). If, instead, these dollar values are what you are choosing in the pop-up, then you need to create a pop-up with these values in it.
The Help menu includes a link to a page where you can download the Numbers Users Manual. It also has a link to the Formulas and Functions guide. Both are useful to new users.

My drop-down list won't appear anymore so every time I want to go to a new site I have to type it in where before my drop-down box would appear and I could just click it and hit search and go there how do I make my drop-down box come back

somehow I must've clicked a button that took away my drop down box when I go to use my Google search so different sites that I go to a lot I would always just click it when the drop-down box came up I would click again and hit search and you would bring that page up but even if I go to a site once I leave that I try to click and make the drop-down box come up again with the new search and it nothing happens so the problem is I need my drop down box to come back up to all the places that I visit kind of like a history of like I said I would just click and it would come up by itself now the drop-down box won't come up anymore so I need somebody to tell me what to do to bring my drop-down box back also I am new to computers so I don't know a lot so don't be real technical thanks for the help merry Christmas from Joe

It's not a matter of me assuming to restore it, once the error comes up, the only next step I can do is to restore it. I can't access any of the iphones settings in itunes or anything, it's a mandatory restore. If I just cancel the sync (before restoring) and disconnect the phone, all my apps crash on opening: aka unusable phone. So I have literally no choice but to restore every time the error shows up if I want my phone to work.
I have no idea where I may have duplicate files as it doesn't tell me, so if that is the problem (which I don't think it is) then I don't know where I have to go to delete the duplicates.
And the duplicate file error still doesn't explain why leaving iTunes to restore the phone doesn't work and me having to drag the window around. I know it sounds utterly ridiculous, my friend didn't believe me when I told him either but then I showed him and he was as confused as I am. If I just leave the restore to do its own thing at it's own pace, it will loa maybe 20% then fail for whatever reason.

How do you make a drop-down TOC in Acrobat?

I'm trying to make a drop-down TOC like in this Scripps Benefits Guide pdf. Does anyone know how to make this?
http://www.myscrippshealthplan.com/downloads/Scripps%202012%20e-Catalog%20FINAL.pdf

It uses the app.popUpMenu or app.popUpMenuEx method to create a pop up menu:
http://livedocs.adobe.com/acrobat_sdk/9.1/Acrobat9_1_HTMLHelp/JS_API_AcroJS.88.161.html
http://livedocs.adobe.com/acrobat_sdk/9.1/Acrobat9_1_HTMLHelp/JS_API_AcroJS.88.162.html

[Flex 4.5.1] DropDownController - how NOT to close drop down when clicked on? Example provided!

http://www.nedyalkov.net/filip/flex_projects_tests/DropDownControllerTest/ - view source enabled
When you click the button a drop down is shown. All I want to do is stop it from closing when you click on the drop down. I read a bit from the source code of the DropDownController and it seems like it should check if the mouse is clicked on the openButton or on the dropDown and if it is one of them keep the dropDown open if it's somewhere outside - close it. But in my case - when I click on the dropDown in closes itself... I tried to add it to the hitAreaAdditions... no luck the same problem.
So the question is: How do I make the drop down NOT to close when clicked on?
Please check my example and let me know what am I doing wrong... should be very simple but... thanks!

First to correct my example - since I copied the code for the drop down from the dropDownListSkin it has includeIn="open" which causes my dropDown to be null when I set it to dropDownController.dropDown. To fix the example if you test it just remove the includeIn and autoDestructionPolicy lines.
I believe I have found a bug in the DropDownController, would be nice if adobe employee confirms this or correct me if I am wrong.
Here is the source function the code marked in red is with the issue:
mx_internal function systemManager_mouseDownHandler(event:Event):void
        // stop here if mouse was down from being down on the open button
        if (mouseIsDown)
            mouseIsDown = false;
            return;
        if (!dropDown ||
            (dropDown &&
             (event.target == dropDown
             || (dropDown is DisplayObjectContainer &&
                 !DisplayObjectContainer(dropDown).contains(DisplayObject(event.target))))))
            if (hitAreaAdditions != null)
                for (var i:int = 0;i<hitAreaAdditions.length;i++)
                    if (hitAreaAdditions[i] == event.target ||
                        ((hitAreaAdditions[i] is DisplayObjectContainer) && DisplayObjectContainer(hitAreaAdditions[i]).contains(event.target as DisplayObject)))
                        return;
            closeDropDown(true);
I think these lines of code were ment to look like this (notice the black exclamation mark):
(dropDown &&
             (event.target != dropDown
             || (dropDown is DisplayObjectContainer &&
                 !DisplayObjectContainer(dropDown).contains(DisplayObject(event.target)))))
or like this (should be the same thing):
dropDown && !(DisplayObjectContainer(dropDown).contains(DisplayObject(event.target))
So this bug causes the drop down to close wherever you click when the event.target is the dropDown itself. Workarounds I guess are put another component in the drop down and "cover" the dropDown with it so it doesn't get any hits or use the hitAreaAdditions.
Message was edited by: FM_Flame

How to make each drop down a different color?

Similar Messages

Maybe you are looking for