Spry Menu Color Changes

I'm looking to only change the hover on the submenu of the
spry menu I'm creating. In the CSS file I seperated the lines that
have all the MenuBarHorizontal hovers grouped together but that
didn't work. I dont' want the background-color to change on the
main menu when hovered, however, I'd like the submenus
background-color and color to change. Please help.
Email me

The sample page I posted came after searching for an easy
"how to do it". The closest I found to a tutorial was this:
http://www.adobe.com/devnet/dreamweaver/articles/spryte_menu.html
The author designs and implements a spry menu with Fire Works
graphics. The last section describes how to modify the existing CSS
for multiple levels. Yet I found the sample page easier to follow.
I hope this helps though.

Similar Messages

Spry menu bar changed since I tried to split cells in a table! Help!

I am VERY new to web design, so I apologize in advance for being ignorant. I am trying to learn!
I had inserted a spry menu bar that looked fine and even tested fine!
I subsequently tried to split a section of my table in the web page in order to have 3 columns of centered text. The first time I did this, the spry menu bar became vertical even though it is listed as horizontal. I looked up a forum answer, copied the code from the suggestion, and that seemed to fix the problem (although I still don't know what EXACTLY happened)
I tried to split the table again (I had undone everything prior to this), only this time, the spry menu bar is located outside the page in the left hand corner where my background (I have a wrapper) is. I tried opening another page where I already had a nice spry menu bar, and it did the same thing!! This makes me think it is the CSS sheet for the menu bar that was modified somehow when I split the table. I'm pasting the CSS here below, so if anyone sees any issues that might cause this problem, please let me know!! I have been working for the most part in design view, and haven't really modified the code other than to put a wrapper in and a facebook like button, which I've now lost in the slitting cells catastrophe. Thanks in advance!!!
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0;
list-style-type: none;
font-size: 12pt;
cursor: default;
width: 60%;
float: left;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12pt;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
background-color: #99CC66;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: auto;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #99CC66;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #336600;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Well, I took a picture of my dreamweaver screen, so you can see what I am looking at...
You can see that the spry menu bar shows up in the top left corner in my design view, but on the website, it is located in the correct place! Maybe it is a Dreamweaver problem??? This happened when I tried to split the cell underneath the section that says "Let NOLA Scribes help you!" into 5 cells so that I could insert 5 differnet pictures and captions. Now, when I open the other linked pages in Dreamweaver, it does the same thing! I'm using an older version of Dreamweaver, but from what I read, that shouldn't be an issue. Thanks in advance for your help!

Menu color changes today- from blue to gray

When I booted up the tv this afternoon, the menu colors were different. This seemed to occur after a FIOS reboot screen greeted me when I turned on the said tv. And were any other changes made if indeed it was a software update?
Thanks in advance,
Jim Gruba

This is an update that has been rolling out the last several weeks to different areas. The color for the menu/guide has changed as well as other enhancements. Check your settings menu to see the additions/changes. I think the software team did a nice job with the changes.

Photoshop menu color change?

Hi!
I have a problem when I open some menu from Encore library, go to Photoshop, make my own menu with my custom pictures. When I click save and go back to Encore. The colors are different than in Photoshop.
Both PS and Encore are CS4 versions.
What I discovered is, when i print screen when encore is on screen, and paste it to photoshop, I get the same colors that i had first in photoshop.
Is there any way to get same colors in Encore as I see them in Photosop?
Any advice? Thanks

It depends....
You need to understand color sets:
http://help.adobe.com/en_US/EncoreDVD/4.0/WS59BED893-683B-492e-847C-254257E34581.html
and also button subpictures.
http://help.adobe.com/en_US/EncoreDVD/4.0/WS2CF5669B-310A-4fa7-A52F-7D01AB25A846.html

FiOS Menu color change?

I have a problem. My menu used to be completley blue, along with my guide, but now it has turned silver. Is this an update? Or did my kids hit something on accident? Any help would be appreciated.

Does anybody actually take a look at these screens before they deploy them? They are the worst combination of colors that make it hard to read anything.
Wite on light coloers? Comeon - really? My 6th grader can do a better job.
Hire a UX expert and stop having all the offshore development team folks just banging out new ideas that just don't make any sense.

Muse Change menu color on click

There is a muse of the day website Idea where there is an in page scrolling with menu color changes on each click event.
I am using Anchor to navigaate through the page but how to get a particular menu item to change color on its click event.

Hello,
Did you try selecting the menu item (make sure the selection indicator says "menu item"), and then changing the style for the different states from the "States" panel as per your requirement? Also, if you want to provide different fills to different menu items of the same menu, disable "Edit Together" from menu options before putting in the fills.
Hope this helps.
Cheers
Parikshit

Changing arrow color on vertical spry menu

How do I change the color of the arrow on the vertical spry menu indicating there are submenus for that topic?

http://www.ipdctest.com/SpryAssets/SpryMenuBarVertical.css
It's the background image in these two CSS rules
ul.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
PS the path to your SpryAssets folder is wrong in the page code.
Page code:
<script src="../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
Should be
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

Change background color in a Spry Menu

At last, I understood working of a vertikally spry. But after
many "try's
and errors" with changing the "SpryMenuBarVertical.css", the
backgground
color will not change from grey to another color.
Please have a look to for help at
http://www.kfhgd.internetcafe-kaufbeuren.de/index.php.
Ciao, servus und salut
Janis

Janis,
Change the background-color here:
UL.MenuBarVertical A {
PADDING-RIGHT: 0.75em;
DISPLAY: block;
PADDING-LEFT: 0.75em;
PADDING-BOTTOM: 0.5em;
CURSOR: pointer;
COLOR: #000000;
PADDING-TOP: 0.5em;
BACKGROUND-COLOR: #eee;
TEXT-DECORATION: none;
And for the hover color, change the background-color here:
UL.MenuBarVertical A:hover {
COLOR: #fff;
BACKGROUND-COLOR: #33c;
Ken Ford
Adobe Community Expert - Dreamweaver
Fordwebs, LLC
http://www.fordwebs.com
"Janis" <[email protected]> wrote in
message
news:frum9v$ath$01$[email protected]..
> At last, I understood working of a vertikally spry. But
after many "try's
> and errors" with changing the "SpryMenuBarVertical.css",
the backgground
> color will not change from grey to another color.
>
> Please have a look to for help at
>
http://www.kfhgd.internetcafe-kaufbeuren.de/index.php.
> --
> Ciao, servus und salut
> Janis
>

Spry Menu Bar Colors and Pictures in Dreamweaver

I'm having some trouble changing the color of the spry menu
bars that I created in Dreamweaver. Whenever I preview them in a
browser they show up as grey with black text. What I want them to
show up as is blue with white text before the mouse goes over them
and highlights them. When the mouse goes over them I want them to
still be blue with white text and also my drop down menu options as
well.
What would be the fastest and easiest way to do this and if
there is what css code is required for me to change? I'm unfamiliar
with how css code works.
I'm also having some problems with copying and pasting
pictures and editing them too. what software can i download that is
free that i can use to edit my pictures.
I have the trial version mind you and I'm trying to get this
finished as fast as I can.

> What would be the fastest and easiest way to do this and
if there is what
> css
> code is required for me to change?
Bring up your page and adjust the CSS in the
SpryMenuHorizontal.css or
SpryMenuVertical.css page that is attached. All the color
values are in
there.
>I'm unfamiliar with how css code works.
You need to change this. Without a thorough working knowledge
of HTML and
CSS (at the very least), you will never have great success in
either
Dreamweaver or web design. I first learned web design using
Notepad, typing
every single tag, and I am soo grateful now that I had that
solid coding
experience .. without it, this program would be very hard to
master.
> I'm also having some problems with copying and pasting
pictures and
> editing
> them too. what software can i download that is free that
i can use to edit
> my
> pictures.
Free? I'm not sure any more .. you can use either the 30 day
trial of
Fireworks or Photoshop (Fireworks would probably be easier to
pick up) but
if you're going to do a lot of this, you need to get some
good tools and
learn them well.
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development

How to change hover state on spry menu dropdowns?

I've spent 4 hours making changes to the style sheet. I cannot figure out how to make the drop-down menu background change when you mouseover. The text color changes, but the background doesn't. I keep making changes to the stylesheet, and sometimes I see no difference.
Also... trying to change the font color on the main menu text. Style sheet LOOKS right, but doesn't display any change.
ALSO, my border is wider than the submenus. They are both set to 15ems. Maybe I don't understand ems??? I appreciate all your help out there! Sorry for not taking out all comments from code...
http://duenorthdesign.com/pcm/index2.html
ul.MenuBarHorizontal { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 748px; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 8em; float: left; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul { margin: 0; padding: 0; list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: 15em; position: absolute; left: -1000em; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { width: 15em; font-size: 12px; background-color: #C2CA9A; color: rgba(0,0,0,1); } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; margin: -5% 0 0 95%; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible { left: auto; top: 0; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul { border: 1px solid #61270e; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; background: 61270e; padding: 0.5em 0.75em; color: ffffff; text-decoration: none; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus { color: #61270e; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible { background: transparent; color: #61270e; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenu { background-image: url(../images/bkd_navtop.jpg); background-repeat: repeat-x; color: rgba(255,255,255,1); font-family: "Yanone Kaffeesatz", Verdana, Geneva, sans-serif; width: 149px; font-size: 23px; } /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenu { background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; }

The good news is, Spry components generate their own CSs files so you know where to start when customizing. From there you can either go into the CSS file itself, or use the CSS styles panel in Dreamweaver.
if you're looking within the CSS file, you first need to find the block the styles the particular element you want to change, and tweak the values. However, if any of the attributes are inheriting their states from a parent rule, then you need to add that attribute to override the parent setting. So that means making sure you're using the right attribute and getting the syntax right.
If you use the CSS panel, select all, find you way to the correct style sheet, expand it and find the rule you need to change. You can set these parameters in the area underneath, or just double click the rule in the upper tree and display the CSS rules dialog. This is my favorite as it displays exactly what is contained in the style sheet in visual form. You can change values easily and add new attributes knowing that it will write the correct syntax. This should make it very easy to add hover states for the background and text, dimensions for the submenus and borders. For sizes and borders, I prefer pixels, but you can also add borders per side of the containing box - it doesn't have to be the same border all the way around.

Spry Menu Bar link colors not consistent

I have a horizontal Spry menu bar set up with 4 items in it.
The first item is the Home link and does not have a submenu, but
the other 3 items do. What I want is when you roll over the main 4
items the text link color will be purple (#583399). When an item
has a submenu the rollover text link on the submenu links will be
green (#89b11a).
My current code almost works, but the problem I am having is
that the Home link
without the submenu changes to a green color instead of
purple like the other 3 main links. If I add a test submenu to the
Home link then it turns purple like the other links. How can I get
the Home link to change to purple like the others without having a
submenu attached to it?
Here is my html code that refers to the menu:
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html"
class="MenuBarItemSubmenu">HOME</a></li>
<li><a href="about.html"
class="MenuBarItemSubmenu">ABOUT</a>
<ul>
<li><a
href="services.html">services</a></li>
<li><a
href="bios.html">bios</a></li>
<li><a
href="news.html">news</a></li>
</ul>
</li>
<li><a href="work.html" class="MenuBarItemSubmenu"
>WORK</a>
<ul>
<li><a href="design.html">design</a>
</li>
<li><a
href="advertising.html">advertising</a></li>
<li><a href="casestudies.html">case
studies</a></li>
</ul>
</li>
<li><a href="contact.html"
class="MenuBarItemSubmenu">CONTACT</a>
<ul>
<li><a href="#">.</a></li>
<li><a
href="location.html">location</a></li>
<li><a
href="opportunities.html">opportunities</a></li>
</ul>
</li>
</ul>
Here is the Spry CSS code that pertains to the links:
/* Menu items are a light gray text with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #666666;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
/* Menu items that have mouse over or focus have green text
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #89b11a;
/* Menu items that are open with submenus are set to
MenuBarItemHover with purple text */
ul.MenuBarHorizontal a.MenuBarItemHover,
color: #583399;
/* Menu items that are open with submenus are set to
MenuBarItemHover with purple text */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #583399;
And
here
is a link to my test file so you can see what I am talking
about.
Thanks for any help and let me know if you need anything else
to help with it.

Anyone??

Spry menu changes - How to:

First. I'm not a developer or programmer. I'm a hacker (dabble unknowingly by trial and errororor).
I looked deeply for how to change font characteristics and found nothing helpful except comments that it can't be done or BEWARE! Horse puckey! Don't believe that all you can change is font, background and color.
I needed to change the font size and width of the bars in my Spry menu. This is how I did it and the details are for others to trial and error it themselves.
I created a page with a Spry menu (horizontal for me) and populated it to three levels. The first time you use Spry it will copy the necessary files into your directory and create a .css file you can see in that directory. You can open up the Spry menu and see the .css parameters, which isn't helpful at all. You can, also, open up the .css file as a window pane, which is what you need.
Next, open up your browser and use it to open the file you are using for test purposes (the .html, not the .css file). Now you can get an idea of what your file will look like in a browser on the Internet. Change back to the Dreamweaver window. Make sure you have the "SpryMenuBarHorizontal.css" (or vertical).
Go to the menu . . . Windows > CSS Style and make sure the CSS Styles tab with ALL selected is showing. If the tab only shows the tree view, drag from the bottom slider bar upward to show both the tree view and the Properties view. Now you're ready.
Do this one step at a time ready to undo any changes you don't like.
Set the window pane to the SpryMenuBarHorizontal.css page. Go down the list of Rules in the CSS Panel until you find one that you think might change what you want.
Make the SINGLE change.
Save the change.
Change to the browser and click on Refresh. The changes will show up. Make sure you test each level.
Go back to the Dreamweaver .css pane and either change it back or try the next one.
You will find you can add properties not noted in other discussion or instructions.
I wanted to change both font size and button width. I found that in the Rules I made these changes that worked just fine.
ul.MenuBarHorizontal - I changed the font size from 100% to 60% and got a smaller font universally in the menu.
ul.MenuBarHorizontal ul li - I changed the width from 8.2 ems to 16 ems and had wider menu bars universally.
Experiment, try it, be adventurous! Just do it carefully and be ready to undo unwanted changes.

Other than additional specific changes, this was NOT a question for further discussion. It was simply a solution for others to find.

I colored the spry menu, but it's not showing up in preview.

I changed the color of my spry menu from beige to black. It shows up on my work page, but when I try to preview it, it's as if I had never changed the color. I also tried going to the page through Firefox, but it's not showing up there either. The code says the background of the menu is #000, One the design panels it says the background color is #000 as well. Can someone tell me what I'm missing that is making the spry menu stay at the default color?

Not a good option unfortunately.
"allow multiple consecutive spaces" is an old option in DW which should be discontinued. It simply inserts multiple non-breaking spaces when you press the spacebar.
It's ugly, and unpredictable since it depends on font sizes, browser text sizing etc.
Better to use CSS
letter-spacing http://www.w3schools.com/cssref/pr_text_letter-spacing.asp
word-spacing http://www.w3schools.com/cssref/pr_text_word-spacing.asp

Need transparent background color in Spry Menu Bar

Tried every possible combination.
Built a 150x1000 px header in Illustrator with a 20x1000 px rectangle at the bottom for the nav bar, set as a background image in the header within Dreamweaver.
Can not make a transparent (no color) background within Spry Menu Bar: MenuBar1??
Also, my first nav is 'Welcome' that <li></li> is about 6-8 px higher then the rest of the nav bar??
Any help at all would be appreciated, thanks
optionsclinic.net

Have you tried changing the value of the Background colour in your CSS:
ul.MenuBarHorizontal a
    cursor: pointer;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
    text-decoration: none;
    color: #FFF;
    padding-right: 2px;
    padding-left: 2px;
    display: block;
    background-color: #223F9A;

Spry menu font color

I've replaced a traditional navigation menu with Spry menu. I thought the ul.MenuBarVertical a was where I should change the font color but it is not having an effect. Can you direct me to the right CSS to change. You can see the site at http://www.kinggraphics.net/premier%20site/index.html
I would like the font to be cream but it is coming out blue.

Not a Spry expert, but the code on your page has no CSS class applied to your Nav links.
Hope this helps
<ul id="MenuBar1" class="MenuBarVertical">
      <li><a class="" href="index.html">Home</a>      </li>
      <li><a class="" tabindex="-1" href="history.html">Our History</a></li>
      <li><a class="" tabindex="-1" href="Products.html">Products</a>      </li>
      <li><a tabindex="-1" href="service.html" class="MenuBarItemSubmenu">Service</a>
        <ul>
          <li><a tabindex="-1" href="driverDownloads.html">Sharp Drivers</a></li>
          <li><a tabindex="-1" href="ManualDownloads.html">Sharp Manuals</a></li>
          <li><a tabindex="-1" href="SafetyDownloads.html">Sharp MSDS</a></li>
          <li><a tabindex="-1" href="mailto:[email protected]">E-mail Meters</a></li>
        </ul>

Spry Menu Color Changes

Similar Messages

Maybe you are looking for