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>

Similar Messages

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

Spry Menu Active Color

HALP! I need my spry menu bar colour to stay orange when it is selected. Link to the site below.
http://batengineering.bdaonline.co.nz/
Can anyone out there help!
Raven

See if this helps:
http://www.dreamweaverresources.com/tutorials/spry-currentpage-indicator/
and this old message may help if you are using templates:
http://forums.adobe.com/message/503356#503356
Nadia
Adobe Community Expert : Dreamweaver
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
Web Design & Development
http://www.perrelink.com.au
http://twitter.com/nadiap

Spry menu Background color IE

The background color of one of my menu items (the only one which includes a submenu) appears as white instead of blue in Internet Explorer 8.0
Any tips on how to correc this? I'm using Spry 1.6 - maybe I should download the Spry 2.0 Widget? If I do that, do I have to recreate the entire menu?
http://www.studio2adv.com/dev/gibson
Thanks in advance for any advice.

Sorry, didm't have time to test this but try changing the css background: #FFF;
/* 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;

Spry Menu Background Color

I've created a spry vertical menu with a black background.
When I mouse over one of the menu items and the sub menu appears, I
would like it to have a different color background than the main
menu. Anyone know how to accomplish this?
Thank you>

Sorry, didm't have time to test this but try changing the css background: #FFF;
/* 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;

Spry menu question

Hello....I've created a horizontal spry menu which seemed to
work fine until I saw it in an older version of Windows at a
friend's house. In that instance, the default link color of the
page, which is blue, crept into the spry menu link colors which are
white. The "visited" links in the spry menu are showing up blue.Is
there a way to define the visited/hover colors etc...in the spry
menu so it allstays white? This is the spry code I have now...
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release
1.6 */
/* 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
width: 32.2em;
margin: auto;
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* 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: 8.5pt;
position: relative;
text-align: center;
cursor: pointer;
width: 8m;
float: left;
font-family: "Trebuchet MS", Verdana, Arial;
color: #FFFFFF;
/* 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: 1;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
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: 32.2em;
/* 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: default;
background-color: #D8161F;
color: #FFFFFF;
text-decoration: none;
padding-top: 0.2em;
padding-right: 0.7em;
padding-bottom: 0.2em;
padding-left: 0.7em;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FAFAFA;
/* 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: #e32032;
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;
filter:alpha(opacity:0.1);
/* 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;

I can solve part of your problem. Check out The Essential
Guide to Dreamweaver CS3 by David Powers.
http://www.friendsofed.com/samples/1590598598.pdf.
All the other colors can be controlled by what is defined in David
Powers manual.
The problem that I have not been able to resolve is IE6 picks
up the colors, fonts, underline from a:active or the
default.

How can I add more than one same spry menu (eg. collapsible menu) with in different styles (font size, color, background, etc) on current page?

How can I add more than one same spry menu (eg. collapsible menu) with in different styles (font size, color, background, etc) on current page?

Hi Nancy,
This screenshot was only for imagination. A part of the code (not all) is below. In the code there are some background images but they are not seem in live mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/my_site.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css"/>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<style>
#CollapsiblePanel1 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-color: #003366;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel1 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    line-height: 52px;
#CollapsiblePanel1 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/international.jpg);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel2 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelContent {
    background-color: blue;
#CollapsiblePanel3 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel3 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel3 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel4 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel5 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
</style>

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??

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

Transparent spry menu that has a background color on sub menus and a few other problems(Please Help)

Hi im a noob at dream weaver and i've been trying to create a menu and i have been having problems with this menu bar i don't know what to upload and i have made a topic about this before but i only got one reply and so i am trying to make my menu bar transparent and then the sub menu's colored with the color code #1A1A1A and the menu bars that have been color background are only the sub sub menu bars if you know what i mean and also my other problem is the spacing i have between each option is really uneven is there a way to make them evenly sperated apart from each other rather than just the size of a "box" that the text is in. Here is my SpryMenuBarHorizontal.css code
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* 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: 0 auto;
          padding: 0;
          list-style-type: none;
          font-size: small;
          cursor: default;
          width: 100em;
/* 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: 18px;
          position: relative;
          text-align: left;
          cursor: pointer;
          width: 10.8em;
          float: left;
          visibility: visible;
/* 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: 8.2em;
          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;
/* 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
ul.MenuBarHorizontal ul
          border: 0px solid #1A1A1A;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: pointer;
          background-color: transparent;
          padding: 9px;
          color: #FFF;
          text-decoration: #1A1A1A;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
          font-weight: bold;
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          font-size: 18px;
/* 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: #0048ff;
          color: #EEE;
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-color: #1A1A1A
          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-color:#1A1A1A;
          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-color:#1A1A1A
          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-color: #1A1A1A
          background-repeat: no-repeat;
          background-position: 85% 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;
          filter:alpha(opacity:0.1);
/* 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-color: #1A1A1A;

See if this post helps :
http://forums.adobe.com/message/1997762#1997762
and this one:
http://forums.adobe.com/message/1898539#1898539
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap

Wrong Font in Spry Menu DW CS3

Hi, I just got CS3 Design Premium and am playing with the
Spry Menu widget in DW. So far it's been pretty cool and fairly
easy to customize. But I'm having an issue. In DW, my menu fonts
display as a Verdana sans-serif but when uploaded to the server,
it's showing as a Times New Roman type serif font. Any clues? The
test site is here:
http://trekkin.com/test
Here is the SpryMenuBarHorizontal.css CSS file for your
viewing pleasure.

jhurlbut wrote:
> Hi, I just got CS3 Design Premium and am playing with
the Spry Menu widget in
> DW. So far it's been pretty cool and fairly easy to
customize. But I'm having
> an issue. In DW, my menu fonts display as a Verdana
sans-serif but when
> uploaded to the server, it's showing as a Times New
Roman type serif font. Any
> clues? The test site is here:
http://trekkin.com/test
>
> Here is the SpryMenuBarHorizontal.css CSS file for your
viewing pleasure.
>
> /* Menu items are a light gray block with padding and no
text decoration */
> ul.MenuBarHorizontal a
> {
> display: block;
> cursor: pointer;
> background-color: #a05030;
> padding: 0.5em 0.75em;
> color: #FFFFFF;
> font: Verdana, Arial, Helvetica, sans-serif;
> text-decoration: none;
> text-align: left;
> }
>
Change the one above for this......
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #a05030;
padding: 0.5em 0.75em;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: left;
HTH
chin chin
Sinclair

Using Web font in Spry Menu?

I can get the web fonts I want to use to "work" anywhere on a page except for in a spry menu.
I'd like to utilize one for a menu. How do I accomplish this seemingly herculean task?
Thank you.

Kindly put your page and dependent files online and post a link here

Multiple text colors in my spry menu

Can I make multiple text colors in my spry menu? I want to match the text color on one of my spry menu items to the hover color so that you know which link you are currently visiting. I haven't posted the site yet until I work out all the kinks. So, to summarize, I have my spry menu link text color (ul.MenuBarVertical a) set to #E00 and my hover color for those items (ul.MenuBarVertical a.MenuBarItemHover) set to #888. All of the links also contain the same spry menu. I would like the link you're currently in to be #888 and the other links to be #E00 with all of them hovering with color #888. How can I give unique color to an individual menu item? Any help you can give is much appreciated!

Sorry to bug you again. I implemented your suggestion as you can see in this partial pageview:
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script src="js/navbar-select.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
ul.MenuBarHorizontal a#button1:hover, ul.MenuBarHorizontal a#button1:focus
{ color:#625647; }
</style>
</head>
<body>
<div id="team-vision" class="container">
<div class="header"> <a href="#"><img id="logo" src="images/logo_i.png" width="215" height="36" alt="Greiner Engineering"></a>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">INTRO</a>|</li>
<li><a href="ger-vision.shtml">VISION</a>|</li>
<li><a href="ger-2firmen.shtml">2FIRMEN</a>|</li>
<li><a href="#">PROJEKTE</a>|</li>
<li><a href="ger-network.shtml">NETZWERK</a>|</li>
<li><a href="ger-contact.shtml" id="button1" class="MenuBarItemSubmenu">KONTAKT</a>|
<ul>
<li><a href="ger-contact.shtml">ADRESSEN</a></li>
<li><a href="ger-team.shtml">TEAM</a></li>
<li><a href="ger-location.shtml">LAGEPLAN</a></li>
</ul>
</li>
<li><a href="ger-links.shtml">LINKS</a>|</li>
<li><a href="ger-publications.shtml">VERÖFFENTLCHUNGEN</a>|</li>
<li><a href="ger-jobs.shtml" class="MenuBarItemSubmenu">JOBS</a>|
<ul>
<li><a href="ger-jobs.shtml">OFFENE STELLEN</a></li>
<li><a href="ger-practice.shtml">PRAKTIKUM</a></li>
<li><a href="ger-thesis.shtml">DIPLOMARBEIT</a></li>
</ul>
</li>
<li><a href="ger-impressum.shtml">IMPRESSUM</a>|</li>
</ul>
</div>
I did this in ger-kontakt.shtml, ger-team.shtml, ger-location.shtml
but it does not leave KONTAKT highlighted.
If you want to check it out my url is http:/www.lsdcoach.com/greiner-engineering. Select GERMAN and the click on KONTAKT. The other menu items without a submenu work great.

Spry Menu and IE Issue (Hover Font Size)

I'm not able to figure out why the hover focus setting works fine with Firefox or Chrome, but I can't find a setting in the CSS to ensure the value for the font on a hover within IE remains fixed. on a hover, the font size increases slighly in IE and pushes menu out of alignment very slightly. I was able to keep the hover size fixed in Firefox and Chrome via the CSS values for the spry, but not sure why IE is doing this and if there is a setting specific to IE that would allow me to keep the hover font size fixed, but not change the values in Firefox/Chrome. Is there any way to lock in the hover value using CSS for the font so in IE it remains constant?
http://oregonstate.edu/~labellec/CDfiles/index.html
Page is under development, but if you open it up in IE, the menu hover causes too much movement. I'm new to CS4, so, any help appreciated.
Thanks,
Chris

Perhaps you could adapt the techniques used here for your
Spry menu:
http://www.projectseven.com/products/menusystems/pmm2/see-through.htm
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"Webkil" <[email protected]> wrote in
message
news:gnmh2l$dvo$[email protected]..
>I have tried this. I want a transparent background no
colour. As soon as I
>add transparent IE comes up with the word false in the
sub menus.

Submenu Font Size in Spry Menu

I've created a drop down menu using the Horizontal Spry Menu Bar widget and have it looking exactly the way i need it to, except for one thing. I have rthe font size set for 14px, both in the ul.MenuBarHorizontal properties and the ul.MenuBarHorizontal a properties, but I want the font-size in the submenus to be smaller than in the top menu. How can i do that?!
(I've been fooling and fooling with it, and I've googled it and sarched the adobe forums but can't find any posts addressing this issue, other than here: http://foundationphp.com/tutorials/sprymenu/customize2.php - where David Powers says to be careful about changing font size and does not discuss this particular problem ! )
Attached is my stylesheet.
Thank you in advance

This is one way of doing it
<li><a href="#" style="font-size: 9px;">Item 1.1</a></li>
You could also give the tag a class name and include the rule in your style sheet
<li><a href="#" class="myFont">Item 1.1</a></li>

Spry menu font color

Similar Messages

Maybe you are looking for