Spry Vertical Menubar CSS

Currently, the sprymenubarvertical.css file applies the
styles in line 98 through 102 to all vertical menu items,
regardless of parent/child status. By removing
ul.MenuBarVertical a.MenuBarItemHover,
, you can force Spry to acknowledge the parent style for
single menu items with no children. Not sure if this is resolved in
a soon-to-be-released version, but this error is persistent across
all latest browsers with Spry pre-release 1.6.1.
Rob

Similar Messages

Spry Vertical Menubar

I have created a Spry Vertical Menubar in a templage that I
am designing and everything is there except that when you hover
over the Facility Rental button the submenu is too far down on the
page. When you look at it in Dreamweaver CS3 it looks like it is in
the correct location that I want it, but it isn't. Here is a link
http://www.co.chelan.wa.us/ex/index.html
to the issue I'm having.
Any suggestions is greatly appreciated.
Thanks
Penny

Hi Penny,
It looks like you changed the width of the menubar to auto
for this rule:
ul.MenuBarVertical
If you set it to the width that matches the width you
specified on your menu items, it should cause the menu bar to
appear in the correct place:
ul.MenuBarVertical {
width: 182px;
Next, it looks like you changed the top margin of this rule
to 90%:
ul.MenuBarVertical ul
margin: 90% 5% 0 95%;
This is also contributing to the sub menus appearing towards
the bottom of the browser window. I suggest resetting it to 0% or
the original -5% and adjusting from there to your taste:
ul.MenuBarVertical ul
margin: -5% 5% 0 95%;
--== Kin ==--

Spry vertical menubar ie6 issue

I am having some trouble implementing a simple vertical menu
in ie6. Works great in everything, but on ie6 the lower nav button
jumps up to the upper nav button any time the page is refreshed. It
fixes itself as soon as you hover over either.
staging.hypercd.com/mandarintuscany
here's the css:
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
cursor: default;
overflow: visible;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
position: relative;
text-align: left;
cursor: pointer;
width: 140px;
ul.MenuBarVertical li#club{
margin-bottom: 4px;
ul.MenuBarVertical li.submenu{
width: 200px;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: 0 0 0 102%;
padding: 0;
list-style-type: none;
position: absolute;
z-index: 1020;
cursor: default;
width: 200px;
left: -1000em;
top: 0;
background:url(../images/nav_bg.png) repeat;
*html ul.MenuBarVertical ul{
background: repeat;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/nav_bg.png',
sizingMethod='scale');
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 8.2em;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
color: #ffffff;
margin-left: 3px;
text-decoration: none;
ul.MenuBarVertical li.submenu a{
margin-left: 5px;
font-weight: bold;
line-height: 20px;
color:#CCCCCC;
ul.MenuBarVertical li.submenu a.selected{
color: #ffffff;
ul.MenuBarVertical li.submenu a:hover{
color: #ffffff;
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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
f/loat: left;
clear: both;
any ideas/suggestions?

Hi mmannello,
I'm not sure if you've modified the page since you posted
this, but I'm not seeing any jumping when I load your current page
in IE6 ... what I do see is that you have 2 vertical menubars with
one menu item in each. Is that on purpose?
--== Kin ==--

Problems with Spry vertical menubar in IE

Help needed! I am creating a template page using a Spry
vertical menu bar. It works fine in all my browsers except for IE,
which places a white space on the right-hand side of the menu bar.
Some of my templates are working fine with similar bars, but I
can't correct the problem even after re-saving the template using a
working page. Example page can be viewed at
http://www.opportunityresources.org/support/index.html
Thanks for any ideas!

That worked, but now IE is using the wrong color for the
vertical menu bar hyperlinks (sitewide) - it should be white,
rollover to blue, visited white. I suspect it is reading the CSS
set up for my general page where links are set to gray. Maybe a
hierarchy issue? Not sure how to force it to separate the two...?
Thank you!
http://www.opportunityresources.org/about%20us/index.html

Spry vertical menu bar positioning issue in IE

I have been trying to fix a problem with my spry menu bar and have been looking for answers at several spry forums. I have modified my vertical spry menu to open submenus above and to the right of the main menu. It works in Opera, Firefox and Safari and opens below in IE. I tried changing the positioning from absolute to relative and that made it position itself below in all browsers. So, by deductive reasoning there seems to be something going on with IE when it reads the absolute positioning, is there a fix for this? You can see my website at raydlett.com the menubar is called STUDIO.
Here is my vertical menubar CSS:
@charset "UTF-8";
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 6.75em;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 6.75em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
    margin: 0 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 9.2em;
    left: -1000em;
    bottom:-1%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
    width: 9.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
    border: 0px solid #fff;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
    border: 0px solid #fff;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #fff;
    padding: 0.5em 0.75em;
    color: #666;
    text-decoration: none;
/* Menu items that have mouse over or focus have a white background and orange text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #fff;
    color: #FF4C00;
/* Menu items that are open with submenus are set to MenuBarItemHover with a white background and orange text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: #fff;
    color: #FF4C00;
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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
Here are the associated global.css components:
body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 76%;
    padding: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    margin: 0;
    background: #fff;
    color: #666;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    line-height: 1em;
#container {
    width: 880px;
    text-align: left;/* this overrides the text-align: center on the body element. */
    margin-right: auto;/* the auto margins (in conjunction with a width) center the page */
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    font-family: Verdana, Geneva, sans-serif;
#header {
    font-size: 1em;
    padding-left: 17px;
    height: 26px;
    position: relative;
ul {
    padding:0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 10px; /* used for both menubar 1 and 2 */
    margin-left: 20px;/* used for both menubar 1 and 2 */
li {
    margin:0;
    padding:0 0 0 5px;/* used for both menubar 1 and 2 */
I have also attached the index.html file that uses the modified "STUDIO" Spry MenuBar2
Any help on this would be greatly appreciated. Thanks in advance.
ribit10

That makes sense, tooltips are tooltips, and appear at the tip of the mouse...But those "submenu triggers" can be simply styled links (as they are in a spry menu)...don't need to be swaps or images or image maps.
What about a using show/hide behavior? Click the STUDIO and the menu pops up adjacent in an apDiv. Click a link. Or click the x to close the apDiv.
You know this is just an exercise to run through all the Javascript and Spry that is in Dreamweaver, eh?
By the way, just providing a link to your page is quite all you need to do. You don't need to attach your files or show pictures of them...by providing a link, I can save a web page in its entirety and open it in Dreamweaver.
Beth

Spry Menu Bar css not compatible with IE7? or compatibility View on IE8?

Well i've made my website
. Swimmerbuddy.com
Problem:I used the spry menu bar on a div tag. I've got it working fine on several browser and so on.. but hmm. i noticed that IE7 and only on compatibility view of IE8 it does not work...
It seems like the drop down menus get cover by the main content underneath it..
I started of with dwt i made my self.This is the DWT and the css that controll the dwt and the spry menu bar.
PLZ HELP ME.. THANKS
THIS IS THE DWT THAT THE PAGE RUNS ON
<!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>Untitled Document</title>

<link href="../CSS/main.css" rel="stylesheet" type="text/css" />


<style type="text/css">
a:link {
color: #000;
text-decoration: none;
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:visited {
color: #000;
text-decoration: none;
a:hover {
text-decoration: none;
color: #000;
a:active {
text-decoration: none;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
    <div id="networkicons"><a href="http://www.facebook.com/?ref=logo#!/profile.php?id=100001554936595" target="_blank"><img src="../_images/facebook.png" alt="facebook.com" width="45" height="45" border="0" title="facebook.com"/></a><a href="http://www.myspace.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/myspace.png" alt="myspace.com" width="44" height="45" border="0" title="myspace.com"/></a><a href="http://twitter.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/twitter.png" alt="twitter.com" width="43" height="45" border="0" title="twitter.com"/></a><a href="http://www.youtube.com/swimmerbuddy1" TARGET="_blank"> <img src="../_images/youtube.png" alt="youtube.com" width="44" height="45" border="0" title="youtube.com"/></a></div>
    <div id="buyNow1">
      <p><a href="../order_now.html"><img src="../buynowbutton.png" alt="bt1" width="130" height="25" border="0" longdesc="Order Your Swimmer Buddy Today!!" /></a></p>
    </div>
</div>
<div id="mainNav">
    <ul id="mainNavcontent" class="MenuBarHorizontal">
      <li><a href="../index.htm">Home</a>        </li>
      <li><a href="../swimmer.html">Swimmer Buddy</a></li>
      <li><a href="../order_now.html">Order Now</a>        </li>
      <li><a href="#" class="MenuBarItemSubmenu">Gallery</a>
        <ul>
          <li><a href="../photo_gallery.html">Photos</a></li>
          <li><a href="../video_gallery.html">Videos</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Zinger Products</a>
        <ul>
          <li><a href="http://www.winkyscoop.com/">Winky Scoop</a></li>
          <li><a href="http://www.1800succeed.com/">Hypmovation</a></li>
          <li><a href="http://www.1800succeed.org/">1800SUCCEED</a></li>
          <li><a href="http://www.zingerproducts.com">Zinger Store</a></li>
        </ul>
      </li>
      <li><a href="../about.html">About Us</a></li>
      <li><a href="../contact.html">Contact Us</a></li>
    </ul>
</div>

<div id="pageInfo">
    <div id="info_page">
      <p class="regionID">Region ID</p>
      <hr class="breaklinePageInfo" />
      <p class="breadcrum">> <a href="../index.htm">Breadcrum </a></p>
    </div>
    <div id="mainContent">
      <div id="content">
        <p>Main Content Goes her</p>
      </div>
    </div>
</div>


   <div id="buyNow2"><a href="../order_now.html"><img src="../buynowbutton.png" width="130" height="25" /></a></div>
   
<div id="footer">
<div id="footertext">
        <p class="footertextclass">Copyright © 2010 SwimmerBuddy.com. All rights reserved. SwimmerBuddy.com is part of <a href="http://www.zingerproducts.com" class="footertextclass">Zinger Products</a>. Designated Trademarks and brands are the property of their respective owners. This page was last modified Setember 28,2010. Swimmer Buddy - Pattent Pending 2010</p>
      </div>
    <div id="footerlinks">
        <p classs="footerlinkspacing"> <span class="footerlinkspacing"><a href="../Disclaimer.html">Disclaimer</a><a href="../terms.html"> Term of Service </a><a href="../contact.html">Contact Us</a></span>
</div>
      </div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("mainNavcontent", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
THIS IS THE MAIN.CSS
@charset "utf-8";
#networkicons {
height: 50px;
width: 200px;
margin-top: 160px;
margin-left: 15px;
position: absolute;
#wrapper {
width: 933px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
position: relative;
#mainNav {
text-align: center;
position: relative;
margin-right: auto;
margin-left: auto;
width: 934px;
padding-bottom: 15px;
clear: both;
overflow: visible;
#navwrapper {
width: 935px;
margin-right: auto;
margin-left: auto;
#mainContent {
width: 910px;
padding-left: 10px;
padding-right: 10px;
position: relative;
padding-bottom: 20px;
padding-top: 20px;
#content {
width: 910px;
position: relative;
#wrapper #footer #footerlinks p .footerlinkspacing a {
margin-right: 20px;
#footer {
width: 930px;
background-color: #fff;
position: relative;
margin-top: 5px;
text-align: center;
color: #000;
padding-bottom: 10px;
margin-bottom: 15px;
#header {
width: 930px;
height: 209px;
background-image: url(../_images/header.jpg);
background-repeat: no-repeat;
#buyNow1 {
height: 25px;
width: 140px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
background-repeat: no-repeat;
color: #666;
padding: 5px;
position: absolute;
top: 160px;
right: 150px;
.buyNow1 {
color: #666;
#wrapper #pageInfo #info_page .breadcrum {
color: #003;
#wrapper #pageInfo #info_page .breadcrum a {
color: #003;
html, body {
margin: 0px;
padding: 0px;
#buyNow2 {
height: 25px;
width: 130px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
padding: 5px;
position: relative;
#wrapper #buyNow2 a img {
position: absolute;
top: -30px;
right: 50px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#pageInfo {
width: 930px;
background-image: url(../_images/pageinfobackground.jpg);
background-repeat: repeat-x;
background-color:#FFF;
text-align: left;
padding-bottom: 15px;
margin-top: 18px;
position: relative;
overflow: visible;
visibility: visible;
#wrapper #mainNav #mainNavcontent {
position: absolute;
left: 0px;
width: 930px;
.regionID {
font-size: 2em;
font-weight: bold;
color: #FFC;
margin-top: 1em;
margin-bottom: 0em;
text-align: left;
margin-left: 5px;
.breaklinePageInfo {
margin-top: 0.5em;
color: #FAFEAB;
.breadcrum {
color: #003;
font-size: 1.1em;
font-weight: bold;
text-decoration: underline;
margin-top: -0.2em;
margin-left: 15px;
#breadcrum {
font-weight: bold;
color: #003;
#footertext {
width: 910px;
font-size: 0.6em;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
#footerlinks {
width: 930px;
font-size: 0.7em;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #000;
position: relative;
margin-top: 10px;
margin-bottom: 5px;
.footertextclass {
color: #000;
.footerlinkspacing {
margin-top: -0.5em;
color: black;
height: 10px;
font-style: normal;
line-height: normal;
font-variant: normal;
letter-spacing: normal;
p {
margin: 0px;
padding: 0px;
body {
text-align: center;
margin-top: 5px;
background-color: #073e78;
background-image: url(../_images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
font-size: 100%;
THIS IS THE dropdown menu.css
@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;
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: 0px;
padding: 0;
list-style-type: none;
font-size: 100%;
position: static;
text-align: center;
cursor: pointer;
width: 132.8px;
float: left;
overflow: visible;
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: 132.8px;
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: 8.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: #333;
color: #FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
background-image: url(../_images/bar-top.png);
background-repeat: no-repeat;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #003;
background-image: url(../_images/bar-Bottom.png);
/* 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
color: #003;
background-image: url(../_images/bar-Bottom.png);
background-position: bottom;
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/bar-topsub.png);
background-repeat: no-repeat;
background-position: right top;
/* 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(../_images/bar-topsubhover.png);
background-repeat: no-repeat;
background-position: right bottom;
/* 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(SpryMenuBarDownHover.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;

Thanks a lot for that tip. It does improve it by a whole lot.. i c what my mistake was.. however, something is still off
.. The Drop down menu is not behaving well...
As you may c by the picture, the drop down menu now moves to the right. and is not because of the object to its left, i've modified that. Zinger Products Drop Down Menu also does the same.

Spry Horizontal Menubar Submenus offset in Explorer

I am redesigning my website and am having trouble with the spry horizontal menu bar submenus which are offsetting to the right in Explorer. They should be vertically aligned. They work correctly in Safari, Firefox, and Chrome. Also having troubles with it on the Home page where it does not want to drop down over my table-rollover content. Any suggestions on how to fix these glitches? My beta website.

I changed the document and re-uploaded it to the server. But the version on the server is still showing no change! When I close and re-open my original local document, it does show the changes made. Somehow, the changes are not properly uploading to the server or it is not allowing them to post.
Jeff
Here is the code in the document that was posted (maybe you could cast an eye on that in the mean time):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Lawson Design</title><meta name="Jeff Lawson, glendale, california, websites, brand identity, brand image, corporate identity, logos, branding, trademarks, style guides, posters, graphic design, graphic designers, brochures, marketing collateral, sales brochures, annual reports, company brochures, direct mail promotions, packaging, signage, graphic standards, marketing, commercial artists, Jeffrey Dale Lawson, consultant, fine artists, giclee editions, fine art, " content="" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<style type="text/css">
body {
          background-image: url(images/tile8.gif);
#headerbox {
          height: 130px;
          width: 840px;
          position: absolute;
          left: 70px;
          top: 68px;
          /* [disabled]float: right; */
          /* [disabled]clear: left; */
          background-image: url(images/lawsondesign.png);
          visibility: visible;
          /* [disabled]font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; */
          /* [disabled]font-size: 15px; */
          /* [disabled]color: #444; */
          /* [disabled]padding-top: 35px; */
          /* [disabled]padding-left: 300px; */
          /* [disabled]padding-right: 250px; */
          /* [disabled]padding-bottom: 20px; */
          background-repeat: no-repeat;
</style>
<link href="../Templates/lawsondesign.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url("SpryAssets/SpryMenuBarHorizontal.css");
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onLoad="MM_preloadImages('cell1_ro.jpg','cell2_ro.jpg','cell3_ro.jpg','cell4_ro..jpg','ce ll5_ro.jpg','cell9_ro.jpg','cell6_ro.jpg','cell7_ro.jpg','cell8_ro.jpg','cell10_ro.jpg','c ell11_ro.jpg','cell12_ro.jpg')">
<div class="sectionheading" id="headerbox"></div>
<div id="text_larger">
<table height="419" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" bgcolor="#FFFFFF" id="cell1"><a href="packaging.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell1','','index/cell1_ro.jpg',1)"><img src="index/cell1.jpg" name="index/cell1" width="174" height="140" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell2"><a href="identity.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell2','','index/cell2_ro.jpg',1)"><img src="index/cell2.jpg" name="index/cell2" width="174" height="140" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell3"><a href="communications.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell3','','index/cell3_ro.jpg',1)"><img src="index/cell3.jpg" name="index/cell3" width="174" height="140" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell4"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell4','','index/cell4_ro.jpg',1)"><img src="index/cell4.jpg" name="index/cell4" width="174" height="140" border="0" /></a></td>
    </tr>
    <tr>
      <td align="center" bgcolor="#FFFFFF" id="cell5"><a href="identity.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell5','','index/cell5_ro.jpg',1)"><img src="index/cell5.jpg" name="index/cell5" width="174" height="141" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell6"><a href="packaging.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell6','','index/cell6_ro.jpg',1)"><img src="index/cell6.jpg" name="index/cell6" width="174" height="141" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell7"><a href="communications.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell7','','index/cell7_ro.jpg',1)"><img src="index/cell7.jpg" name="index/cell7" width="174" height="141" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell8"><a href="identity.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell8','','index/cell8_ro.jpg',1)"><img src="index/cell8.jpg" name="index/cell8" width="174" height="141" border="0" /></a></td>
    </tr>
    <tr>
      <td align="center" bgcolor="#FFFFFF" id="cell9"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell9','','index/cell9_ro.jpg',1)"><img src="index/cell9.jpg" name="index/cell9" width="174" height="137" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell10"><a href="identity.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell10','','index/cell10_ro.jpg',1)"><img src="index/cell10.jpg" name="index/cell10" width="174" height="137" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell11"><a href="communications.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell11','','index/cell11_ro.jpg',1)"><img src="index/cell11.jpg" name="index/cell11" width="174" height="137" border="0" /></a></td>
      <td align="center" bgcolor="#FFFFFF" id="cell12"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('index/cell12','','index/cell12_ro.jpg',1)"><img src="index/cell12.jpg" name="index/cell12" width="174" height="137" border="0" /></a></td>
    </tr>
</table>
</div>
<div class="footerbar" id="footerbar"></div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="home"><a href="index.html" title="Welcome to Lawson Design">Home</a></li>
<li id="aboutus"><a href="about.html" title="About Us" class="MenuBarItemSubmenu">About Us</a>
    <ul>
      <li><a href="clients.html">Clients</a></li>
      <li><a href="jefflawson.html" title="About Jeff Lawson">Jeff Lawson</a></li>
      <li><a href="philosophy.html" title="Our Philosophy">Our Philosophy</a></li>
    </ul>
</li>
<li id="services"><a href="services.html" title="Services" class="MenuBarItemSubmenu">Services</a>
    <ul>
      <li><a href="identity.html" title="Brand Identity">Brand Identity</a></li>
      <li><a href="communications.html" title="Communications">Communications</a></li>
      <li><a href="websites.html" title="Websites">Websites</a></li>
      <li><a href="packaging.html" title="Packaging">Packaging</a></li>
      <li><a href="exhibits.html" title="Exhibit Graphics">Exhibit Graphics</a></li>
    </ul>
</li>
<li id="consulting"><a href="consulting.html" title="Consulting" class="MenuBarItemSubmenu">Consulting</a>
    <ul>
      <li><a href="audits.html" title="Brand Audits">Brand Audits</a></li>
      <li><a href="marketing.html" title="Marketing Planning">Marketing Planning</a></li>
    </ul>
</li>
<li id="arteditions"><a href="http://artid.com/members/lawsondesign" title="Giclee Editions" target="_new">Art Editions</a></li>
<li id="contactus"><a href="contact.html" title="Contact Us">Contact Us</a></li>
</ul>
<script type="text/javascript">
var identityslideshow = new Spry.Widget.ImageSlideShow("#identityslideshow", {
          widgetID: "identityslideshow",
          injectionType: "replace",
          autoPlay: true,
          displayInterval: 4000,
          transitionDuration: 2000,
          componentOrder: ["view"],
          plugIns: [ ]
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Spry dropdown menubar works in everything but IE

I'm having a problem with a site I just launched. The site: www.gmiloans.com/commercial
When viewed in IE, the buttons that have a menu overlap with the buttons directly to the left. I've researched left and right but for the life of me, I can't figure out a fix.
Here's my CSS file:
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
width: auto;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* 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: 9pt;
position: static;
text-align: left;
cursor: pointer;
width: auto;
float: left;
font-family: Verdana, Geneva, sans-serif;
background-color: #888;
/* 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: 9pt;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
font-family: Verdana, Geneva, sans-serif;
color: #888;
background-image: url(images/header-template_05.gif);
float: right;
/* 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;
font-family: Verdana, Geneva, sans-serif;
font-size: 9pt;
color: #888;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
font-family: Verdana, Geneva, sans-serif;
font-size: 9pt;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 2px;
color: #bbb;
background-color: #bbb;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-bottom-style: none;
/* 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;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 0px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 8pt;
background-repeat: no-repeat;
color: #555;
width: auto;
background-color: #bbb;
margin: 3px;
padding-top: 1px;
padding-right: 3px;
padding-bottom: 1px;
padding-left: 3px;
right: 50px;
overflow: hidden;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
font-family: Verdana, Geneva, sans-serif;
font-size: 8pt;
font-style: normal;
margin: 0px;
padding: 0px;
color: #000;
background-color: #BBB;
/* 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
font-family: Verdana, Geneva, sans-serif;
font-size: 9pt;
color: #EEE;
margin: 0px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 15px;
width: auto;
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-repeat: no-repeat;
font-family: Verdana, Geneva, sans-serif;
font-size: 8pt;
font-style: normal;
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* 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-repeat: repeat-x;
margin: 0px;
padding: 0px;
/* 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(../../Documents/GMI%20commercial%20funding/gmi-funding-3_02-hover.gif);
background-repeat: no-repeat;
/* 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-repeat: no-repeat;
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;
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
overflow: hidden;
/* 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;

Hi,
Firstly, I cannot see what you have done because the online code has not changed.
Secondly, have a look here to see what is wrong with your HTML-code.
Thirdly, have a look at removing your tables and using DIV's instead as per following example
<!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>Untitled Document</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><img src="images/gmi-funding-4_01.gif" width="839" height="238" alt="" border="0"></div>
<div id="menu">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="index.html">Home</a></li>
        <li><a class="MenuBarItemSubmenu" href="#">Multifamily</a>
        <ul>
          <li><a href="mall">Shopping Mall</a></li>
          <li><a href="anchored">Anchored or Unanchored Center</a></li>
          <li><a href="restaurant">Restaurant</a></li>
          <li><a href="user-occupied">User Occupied</a></li>
          <li><a href="convenience">Gas Station or Convenience Store</a></li>
          <li><a href="franchise">Franchise</a></li>
          <li><a href="mixed-use">Mixed Use</a></li>
        </ul>
      </li>
        <li><a class="MenuBarItemSubmenu" href="#">Retail</a>
        <ul>
          <li><a href="production">Production Facility</a></li>
          <li><a href="storage">Storage</a></li>
        </ul>
        </li>
        <li><a href="#">Item 4</a></li>
      </ul>
</div>
<div id="mainContent">
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    </div>
<div id="footer">
    <p>Footer</p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
If you want differing widths for your menu items then add a CSS rule as follows
<li style = "width: 70px;"><a href="index.html">Home</a></li>
For obvious reasons, I have not completed your page completely, the above is merely an example.
I hope this helps.
Ben

Vertical MenuBar - Widget Positioning

I created a webpage that contains 3 columns. The middle column is mostly pictures and text, and I have floating Vertical MenuBars on each side of the page. The Left Vertical MenuBar has a Widget opening immediately to the Rright, and I'm trying to get the Widget on the Right Vertical MenuBar to open immediately to the Left. So basically I need the Widgets to open inward.
Here's my problem, the Widget on the Right Vertical MenuBar appears in the Upper-Left corner of the webpage. This is what I did so far to get to this point. I copied the SpryMenuBarVertical.css, and create a new file called SpryMenuBarRightVertical.css. The reason I did this is to make sure that the Widgets don't open on the same side both both Vertical MenuBars. I then changed all the rule names from MenuBarVertical to MenuBarRightVertical. I also changed the appropriate code in the webpage to reflect these modifications.
So when I hover over the menu, the widget shows up in the Upper-Left corner. I did play around with the rules (trial and error) to see if I could move the positioning but the closest I got was when I changed...
ul.MenuBarRightVertical ul.menuBarSubmenuVisible
from - left: 0px
to - left: 500px
it moved the widget to the Top-Middle of the page.
The other rules that I think should affect the widget it...
ul.MenuBarVertical ul
cursor: default;
font-size: 100%;
left: -1000em;
list-style-type: none;
margin: -5% 0 0 -100%;
padding: 0;
position: absolute;
top: 2px;
width: 279px;
z-index: 1020;
So now my question is how do I change the positioning of this widget?
Here is some information that might help ( I actually think this is the cause, but I don't know what to do)
From the Dreamweaver CS4 Manual
Position: Absolute: Places the content using the coordinates entered in the Placement boxes relative to the nearest absolutely- or relatively-positioned ancestor, or, if no absolutely- or relatively-positioned ancestor exists, to the Upper-Left corner of the page.
So I believe that the Widget is not recognizing its ancestor of parent.
Thank you for your time and patience on this matter.
Mamilossa

Hi
the fact that you say -
to - left: 500px
it moved the widget to the Top-Middle of the page.
Proves that it does recognize its parent, (in this case the body tag).
I have not used spry for some time but -
You will probably find that you will have to change some of the css/javascript rules and names for the sub-menu items, check for ones that position the sub-menu.
If you have cs3 or 4, then create your menus on new separate pages, and check for the differences in the css/javascript, as these will be the rules you must insert into your 'new' combined css/javascript files.
PZ

Vertical Menubar Displaying Problem

I have a Spry 2.0 Vertical Menubar that is not working right because it is bigger than the <div> is it sitting in. If it would display over the top of all the other <divs> in the page, I would be a happy camper. So I put:   overflow:visible;   in pretty much every area of the menubar style sheet and now the <div> to the right which is a rotating picture, moved down the page to fit in the menubar. And the menu bar isn't working right on top of it (blinking instead of submenus opening). AAGGHHHH!!!! Can anyone help me?
I cannot link to the page on this forum because it is a confidential client site I'm creating that is still in draft mode but I can send an email with the link if you email me first. Thanks in advance for all help!
Jeannette

Here is the style sheet, just incase that will help.
Jeannette
/* CSS Document */
@charset "utf-8";
#container {
margin-left: auto;
margin-right: auto;
html, body, div, span, applet, object, iframe, ul, ol, img, p, a {
margin: 0 auto;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
    background: url(images/bkgrnd-page.gif) no-repeat;
body {
width: 960px;
margin: 0 auto;
height: 100%;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
line-height:20px;
font-style:normal;
font-weight: none;
margin: 0px;
    padding: 0px;
align: center;
background: url(bkgrnd-page.gif) no-repeat;
body a:link{
font-family:Verdana, Geneva, sans-serif;
font-style:normal;
font-weight:normal;
text-decoration:none;
text-align:center;
color:#06F;
font-variant:normal;
text-transform:none;
vertical-align: bottom;
body a:hover{
font-family:Verdana, Geneva, sans-serif;
font-style:normal;
font-weight:normal;
text-decoration:none;
text-align:center;
color:#06F;
font-variant:normal;
font-size:14px;
body a:active{
font-family:Verdana, Geneva, sans-serif;
font-style:normal;
font-weight:normal;
text-decoration:none;
text-align:center;
color:#6C0;
font-variant:normal;
body a:visited{
font-family:Verdana, Geneva, sans-serif;
font-style:normal;
font-weight:normal;
text-decoration:none;
text-align:center;
color:#06F;
font-variant:normal;
#top {
width:960px;
height:25px;
#top .left{
float:left;
width:330px;
height:25px;
font-size:10px;
font-style:normal;
text-decoration:none;
cursor:default;
color:#000000;
vertical-align: text-bottom;
padding-left: 20px;
#top .right{
float:right;
width:610px;
height:25px;
font-size:10px;
font-style:normal;
text-decoration:none;
cursor:default;
color:#000000;
vertical-align: text-bottom;
text-align:right;
#top a {
color:#000000;
font-size:10px;
font-style:normal;
text-decoration:none;
vertical-align: baseline;
#top a:hover {
color:#09F;
font-size:10px;
font-style:normal;
text-decoration:none;
vertical-align: baseline;
#header {
clear:both;
width:960;
max-height: 103px;
margin-bottom:0px;
margin-top:0px;
#header .left{
float:left;
width:350px;
height:103px;
background: #003;
padding-left: 20px;
#header .right{
float:right;
width:350px;
height:103px;
    background:#003;
text-align: right;
padding-right:10px;
#header .center{
margin-left: 260px;
margin-right: 351px;
height: 103px;
background: #003;
font-size: 10px;
color: #FFF;
text-decoration: none;
text-align: center;
#navigation {
clear:both;
height: 287px;
width: 960px;
#navigation .nav {
float:left;
height: 287px;
width: 383px;
padding-top:10px;
padding-left:10px;
#navigation .rotator {
float:right;
    height: 287px;
    width: 575px;
#content {
clear:both;
width: 960px;
height: 600px;
background: #FFF;
margin-top: 32px;
#content .left{
width: 300px;
float: left;
padding-right: 10px;
padding-left: 10px;
background: #FFF;
height:600px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000;
#content .center{
width:298px;
float:left;
padding-right: 10px;
padding-left: 10px;
height: 490px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000;
#content .right{
    width: 300px;
    float: left;
height:496px;
padding-right: 10px;
padding-left: 10px;
#content .pad{
float:right;
height: 102px;
width: 628px;
text-align: right;
vertical-align:bottom;
#footer {
clear:both;
height:80px;
vertical-align: top;
#footer .logo {
float:left;
width:250px;
height:80px;
background:#003;
text-align: center;
padding-top:0px;
vertical-align:top;
#footer .copyright {
float:right;
background: #003;
width:710px;
height:80px;
color:#FFF;
font-size:10px;
margin:0px;
text-align: right;
vertical-align:top;
.title{
font-size:20px;
font-weight:bolder;
color:#003;
.address {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
line-height: 16px;
font-weight: normal;
font-variant: normal;
color: #FFF;
text-decoration: none;
text-align: right;
.phone {
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
font-style: normal;
line-height: 22px;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #6CF;
visibility: visible;
text-decoration: none;
text-align: right;
.title-red {
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: bolder;
font-variant: normal;
color: #900;
text-decoration: none;
#MenuBar {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 15pt;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:1px;
border-style: solid solid solid solid;
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 55em;
.MenuBarFixedCentered {
float: none;
width: 55em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0;
#MenuBar .MenuItem {
padding: 0px 0px 0px 0px;
background-color:#000033;
border-width:1px;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-style: solid solid solid solid;
#MenuBar .MenuItemFirst {
border-style: solid solid solid solid;
#MenuBar .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .MenuItem .MenuItemLabel{
text-align:left;
line-height:1.4em;
color:#FFFFFF;
background-color:#000033;
padding: 6px 15px 6px 10px;
width: 9em;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 11pt;
font-style: normal;
background-color:#000033;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
overflow:visible;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
overflow:visible;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
overflow:visible;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
overflow:visible;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
overflow:visible;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#000033;
color:#FFFFFF;
padding: 6px 0px 6px 7px;
width: 9em;
overflow:visible;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #000033;
border-color: #ffffff #ffffff #ffffff #ffffff;
overflow:visible;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #000033; /* consider exposing this prop separately*/
color: #9CF;
overflow:visible;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: #000033;
color: #9CF;
overflow:visible;
#MenuBar .SubMenu .MenuItemHover {
background-color: #000033;
border-color: #cccccc #cccccc #cccccc #cccccc;
overflow:visible;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #000033;
color: #9CF;
overflow:visible;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: #000033;
min-width:0em; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:1px;
border-style: solid solid solid solid;
overflow:visible;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px;
z-index:10;
overflow:visible;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
overflow:visible;
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: #000033;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px;
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #000033;
color: #0099ff;
overflow:visible;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #000033; /* consider exposing this prop separately*/
color: #0099ff;
overflow:visible;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */

Change spry vertical menu background color

After updating from 4.1 to 6.1, the background color of my
vertical menu changed to the default grey. How do I change the
background to my original blue.
James

I'm going to give you a couple links to help you out.
http://labs.adobe.com/technologies/spry/home.html
- this is the official Spry Homepage. Here you will find an updater
to the Spry. Most of the documentation on the website is built
around the latest version and this is where you will find the
updater. Inside the package are some samples and an extension.
Install the Extension and then restart DW and under the Sites menu
you will see a new option to Update Spry. There is also a link to
the official Spry forums from there.
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
- This is a quick sample of different things you can do to change
the menu bar. This does not include the basic color change. But it
does give you an idea of how to change things in the CSS file (view
the source of the page).
http://labs.adobe.com/technologies/spry/articles/menu_bar/index.html
- This is directly from the Adobe Spry documentation. If you scroll
down a ways it will show you how to do the color customizations for
the Spry Menu Bar.
Lastly, if you do not have a basic understanding of CSS this
will all be foreign to you. If that is the case I would highly
recommend reading over the below CSS tutorial first to get a basic
understand of the CSS code:
http://www.w3schools.com/css/

Spry Vertical Menu does not display properly when uploaded to server.

I am using Dreamweaver CS5 Version 11.0 Build 4909 on Windows XP. The website I am working on is displaying the ordered list incorrectly. The drop down submenus are not lined up underneath each other.
So I did a basic one and uploaded it to the server and had the same outcome. Locally it looks fine but uploaded to the hosting server not fine. Below is the code from the document called deleteme.html. I am new to all this so I apologize if this seems basic. Thanks for your help in advanced.
<!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>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">Content for id "container" Goes Here
<ul id="MenuBar1" class="MenuBarVertical">
    <li><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><a href="#">Item 2</a></li>
    <li><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><a href="#">Item 4</a></li>
</ul>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Hello all,
Thanks to everyone who replied to my post. I have it working now but I have other issues that I will post separately.
Here was my thought process and you can tell me if I am right or wrong. I was working with multiple pages that I was using Spry. I had only one folder set that all the Spry Assets were being saved into. My thinking was that they were getting over written. So I deleted the folder and re-built the page. When I deleted Spry Assets folder it showed me I had 6 pages linked to the Spry Assets folder. I also deleted my Spry Assets folder on my hosting server....thought I would really start from scratch. When I went to upload the files I created a SpryAssets folder and what I realized I had originally put a space between the y and a of the folder name. So I am not sure if the elements in the Spry Assets folder were getting over written or it was because I had a space in the folder name. Thanks again, Mike

Spry vertical menu button shows background color instead of image in preview

Hello All, I'm a newbie (to the forum and Dreamweaver) so my apologies if my question is not in good form. I've searched for this issue but cannot seem to find the exact problem I have.
I've created a website (my first) and used the spry menu bar. It works well using the default blue and grey colors for button and hover. However, I decided I want to spruce it up a little and change the buttons to use a background image (rainbow pattern) instead of background color. I internet researched this for some time and watched all the youtube videos people have posted for this process and editing the spry vertical menu bar CSS. Using the .a and hover lines from the CSS, I was able to add my background .jpg image file. In the design view, the button look exactly how I want them to. However, when I attempt to preview in IE, Chrome, or FF, the buttons still have the default colors and no image. I've gone back and deleted the default blue and grey, but then the preview just shows dark grey and white for the buttoms. is there something that I am overlooking that would cause the background color to show instead of the image I have attached to the buttons. I can't figure out why it looks right in DW but not in preview.
BTW, I'm editing a template file and all the pages are updated with the new image buttons, but none of the pages show correctly in preview.
Thanks

Point taken :-)
This is my spry vertical css code. No sub-menus.
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 1px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
font-weight: bold;
background-image: url(/Images/Rainbow_Button.jpg);
background-color: ;
background-repeat: no-repeat;
background-position: center;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #666666;
color: #333333;
background-image: url(/Images/Rainbow_Button_Hover.jpg);
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #0000FF;
color: #FFF;

Spry Vertical Submenu Bar Appears Behind iFrame

In IE and Chrome, the Spry vertical submenu bar appears properly on every page of the website, except for the one page that has iframes.
In IE, the submenus appear behind the iFrames
In Chrome, the submenus appear in front of the iFrames but with an incomplete border
In Firefox and Safari, the submenus appear as they should (in front of the iframes and with a complete border)
I've scoured this forum and tried several fixes that seemed to work for others with slightly different conditions but didn't work for mine.
I've included my SpryMenuBarVertical.css for referece; if you can offer a fix for this particular issue, I'd be forever grateful. Thank you!
—Lisa
@charset "UTF-8"; /* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT: box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, a fixed-width box with no margin or padding */ ul.MenuBarVertical { margin: 0; padding: 0; list-sty le-type: none; font-size: 100%; cursor: default; width: 245px; } /* 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 are same fixed width as parent; position children relative to this container */ ul.MenuBarVertical li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 245px; } /* Submenus are initially off the left side of the screen (-1000em) and then, on hover, appear slightly overlapping to the right and up with a higher z-index */ ul.MenuBarVertical ul { margin: -5% 0 0 95%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 12em; left: -1000em; top: 0; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } /* Menu item containers are same fixed width as parent */ ul.MenuBarVertical ul li { width: 12em; } /******************************************************************************* DESIGN: color scheme, borders, fonts *******************************************************************************/ /* Outermost menu containers have no borders */ ul.MenuBarVertical { border-bottom: 0px solid Gray; } /* Submenu containers have borders on all sides */ ul.MenuBarVertical ul { border: 1px solid Gray; } /* Menu items are a mustard yellow block with padding and no text decoration */ ul.MenuBarVertical a { display: block; cursor: pointer; background-color: #E6DC8F; padding: 0.5em 1em; color: #333; text-decoration: none; border-top: 0px solid Gray; } /* Menu items that have hover or focus display with a dark green background and white text */ ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { background-color: #275936; color: #FFF; } /* Menu items that are open with submenus are set to MenuBarItemHover with a dark green background and white text */ ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { background-color: #275936; color: #FFF; } /* Active top-level menu items display a branch */ body#home a#homeNav, body#forsale a#forsaleNav, body#clubhouse a#clubhouseNav, body#falmouth a#aboutfalmouthNav, body#faqs a#faqNav, body#directions a#directionsNav, body#calendar a#calendarNav, body#partners a#partnersNav { background-image: url(NavBranch.gif); background-repeat: no-repeat; color: #FFF; padding-left: 50px; } /* Active top-level menu items with a submenu display a branch and a white arrow */ body#aboutridgewood a#aboutridgewoodNav, body#floorplans a#floorplansNav, body#contactrealtors a#contactNav, body#videos a#videosNav { background-image: url(NavBranchArrowWhite.png); background-repeat: no-repeat; background-color: #275936; color: #FFF; padding-left: 50px; } /******************************************************************************* 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 use a green background arrow image */ ul.MenuBarVertical a.MenuBarItemSubmenu { background-image: url(NavArrowGreen.gif); background-repeat: no-repeat; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and use a white background arrow image */ ul.MenuBarVertical a.MenuBarItemSubmenuHover { background-image: url(NavArrowWhite.gif); background-repeat: no-repeat; } /* Current menu items that have a submenu display a branch graphic to the left and a white arrow to the right */ body#story a#aboutridgewoodNav, body#story a#storyNav, body#neighborhood a#aboutridgewoodNav, body#neighborhood a#neighborhoodNav, body#structure a#aboutridgewoodNav, body#structure a#structureNav, body#green a#aboutridgewoodNav, body#green a#greenNav, body#maplewood a#floorplansNav, body#maplewood a#maplewoodNav, body#birchwood a#floorplansNav, body#birchwood a#birchwoodNav, body#sprucewood a#floorplansNav, body#sprucewood a#sprucewoodNav, body#aspenwood a#floorplansNav, body#aspenwood a#aspenwoodNav, body#cedarwood a#floorplansNav, body#cedarwood a#cedarwoodNav, body#oakwood a#floorplansNav, body#oakwood a#oakwoodNav, body#contactrealtors a#contactNav, body#contactrealtors a#contactrealtorsNav, body#lenders a#contactNav, body#lenders a#contactlendersNav, body#owners a#contactNav, body#owners a#contactownersNav, body#videoOverview a#videosNav, body#videoOverview a#videoOverviewNav, body#videoTour a#videosNav, body#videoTour a#videoTourNav, body#videoLender a#videosNav, body#videoLender a#videoLenderNav { background-image: url(NavBranchArrowWhite.png); background-repeat: no-repeat; background-position: -1% 50%; background-color: #275936; color: #FFF; padding-left: 50px; } /******************************************************************************* 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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE { display: inline; f\loat: left; background: #FFF; } }

Long answer = z-index
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
Nancy O.

Question on spry vertical menu bar backgrounds

I have a spry vertical menu bar. The menu branches off to 3 or 4 levels in some cases. When you mouse over the menu structure the menu path that you have selected turns a different color. I acheived this by giving
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
a different text color and also a different background color using CSS. The thing I want to acheive now is to somehow make listings within my menu structure that are clickable links a slightly different color. This is to signal that a menu selection that is currently being hovered over is indeed clickable (and linked to another page). For example, most of my clickable menu listings are at the end of a menu branches. That is to say the menu listing at the 1st and 2nd level are not clickable (linked to another page) but the listing that falls at the end of the menu branch is clickable.
How can I make the menu listings that link to other pages a different color then the other menu listings that do not link anywhere but are instead just the preceding struture to get you to the end of the menu structure?
Currently menu listings which merely branches off and do not link to a clickable page have a reference of "#" as shown below.
<li><a href="#">Menu_1</a>
This "#" was put there by Dreamweaver so I just followed the pattern. Clickable menu listings reference another HTML page as you would expect.

Nancy,
Thanks for the reply (it helped me know how to approach it). It looks like editing
ul.MenuBarVertical a.MenuBarItemSubmenuHover
will give me the behavior I was looking for. I don't know if that is what I want to do now that I look at it though. Using different colored backgrounds when hovering over links seems to contrast too much (even though some are clickable and others are not). Perhaps I didn't have the right color choice.
Instead I thought about emphasizing links that are clickable (with some type of visual variation) as opposed to making the hovering background color path to those clickable links different. I experimented with placing a 1 inch border around links in the menu that can be clicked but I am not sure if I like it or not.
I am using a background color of #7D120C for the hover. Any suggestions are welcome and appreciated.
http://www.indiana.edu/~iutreas/index.html
Thanks,
JTB

Spry Vertical Menubar CSS

Similar Messages

Maybe you are looking for