Vertical Menu Items Height

Is there a way to change the height of the items in a vertical Spry menu? I don't want the listed text items to appear so close together vertically. I am using two background images of 30 px tall - one for the regular and one as a rollover. I have been trying with no luck to add padding to some of the styles in the style sheet. That actually appears to be working somewhat in my design view of DW CS4, but there is never a change in the menu when I upload it to my site. I don't know if I'm doing the correct thing, and if so, exactly what styles I should be working with. Thank you!

In the SpryMenuBarVertical.css stylesheet, apply a line-height to this style:
/* 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: 8em;
     line-height: 200%; /* I exaggerated for effect... */
It may be in px, though I showed it in percentage.
Also, don't forget to upload your changed CSS file, when you make these changes
Beth

Similar Messages

Spry Submenu Not Inline With Vertical Menu in Internet Explorer

Please could someone help with advice on my website. The spry
vertical submenu lines up okay in Safari and Firefox but in
Internet Explorer my submenus are shown higher than the the
vertical menu item they link to. I have tried changing all that I
can to find a solution but nothing works. Have a look at
www.jadedlusion.com/Home.html. I have attached my code.

Please address the following first http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmyareasbest.com%2FMI%2520cities%2 FTraverse-City.html

Cannot get highlight color on menu items (only submenu items).

I am having a problem with the highlight color when I move over a vertical menu item. You can see what I mean by going to:
http://www.staging-area-1.com
If you move the focus over the "Questions" sub-menu item I get the blue highlight, with white text. BUT if I move over any other menu items (Services, About us or Contact us) I simply cannot get the blue highlight.
Can someone tell me which cdd property I need to change to get this?
Thanks.

It is because you'r overriding the background color with an image in the following
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
     background-color: #33C;
     color: #FFF;
     background-image: url(../images/filler.gif);
Remove the background image and all is well.
Gramps

How to add vertical stroke to between top menu items?

I have a horizontal Spry menu bar. How to add a vertical stroke between menu top items?
BUT NOT outermost left and outermost right. Only to BETWEEN top menu items.
In html file I tried this:
<div id="main_menu">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Products</a></li>
      <li class=stroke></li>
      <li><a href="#">Services</a></li>
      <li class=stroke></li>
      <li><a href="#">News</a></li>
      <li class=stroke></li>
      <li><a href="#">Contact</a></li>
     </ul>
   </div>
And in CSS-file I made a style:
#MenuBar1 .stroke
display: block;
width: 1px;
height: 16px;
background-image: url(../images/gui/vertical_stroke.png);
background-repeat: no-repeat;
In Safari this Spry menu bar work fine. But stop working in Firefox and IE.
Also DW4 warning me in properties panel that:
"This menu bar is missing some important tags. Go to Code view and and make sure that each menu item contains an <a> tag."
What is correct method to do this?

In that case you will need to use images.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style>
ul.MenuBarHorizontal a.line {    background: #EEE url(SpryMenuBarLine.gif) no-repeat 95% 50%; }
ul.MenuBarHorizontal a.MenuBarItemSubmenu.line{    background: #EEE url(SpryMenuBarDownLine.gif) no-repeat 95% 50%; }
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu line" 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="#" class="line">Item 2</a></li>
<li><a class="MenuBarItemSubmenu line" 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>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
The images look similar to the following
and
I hope this helps.
Ben

Vertical Menu Height

What can I do about vertical menu bars that exceed the page
height? Some of my menus contain lots of selections within the
submenus, causing the bars to drop beyone the displayed page.
Unfortunately, some of the page viewers can't navigate these as
well since they have an older style mouse with no wheel. Is there a
way to make the bars automatically create a new sub-menu bar when
the display legth is out of range (like page length=600px, for
example)?

In the SpryMenuBarVertical.css stylesheet, apply a line-height to this style:
/* 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: 8em;
     line-height: 200%; /* I exaggerated for effect... */
It may be in px, though I showed it in percentage.
Also, don't forget to upload your changed CSS file, when you make these changes
Beth

Why does Vertical Menu conceal items in design view?

I have a problem with a vertical menu that is placed in my page's left column. When workign in desing view, the vertical menu's sub menu components remain open and this conceals the things that I want to work on that are placed behind the sub-menu items. Any ideas how I can "collapse" the menu when workginin design view? Thanks!

Hello Beth, to follow is the CSS for my menu bar (vertical). I see that the left: -10000em; is in there correctly. Notice anything out of line? Thanks for your input!!!
Rod
@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
/* 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
/* 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
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
     border-top-style: none;
     border-right-style: none;
     border-bottom-style: none;
     border-left-style: none;
     border-top-color: #EEE;
     border-right-color: #EEE;
     border-bottom-color: #EEE;
     border-left-color: #EEE;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
/* 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: #F00;
     color: #FFF;
     font-size: 12px;
     border-top-style: none;
     border-right-style: none;
     border-bottom-style: none;
     border-left-style: none;
/* 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: #F00;
     color: #FFF;
     border-top-style: none;
     border-right-style: none;
     border-bottom-style: none;
     border-left-style: none;
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.MenuBarVertical a.MenuBarItemSubmenu
     background-image: url(SpryMenuBarRight.gif);
     background-repeat: no-repeat;
     background-position: 95% 50%;
     font-size: 12px;
     border-top-style: none;
     border-right-style: none;
     border-bottom-style: none;
     border-left-style: none;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
     background-image: url(SpryMenuBarRightHover.gif);
     background-repeat: no-repeat;
     background-position: 95% 50%;
     border-top-style: none;
     border-right-style: none;
     border-bottom-style: none;
     border-left-style: none;
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
/* 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;
     width: 160px;
     border-top-style: none;
     border-right-style: none;
     border-bottom-style: none;
     border-left-style: none;

Set vertical gap of menu items, list items...

Hi, is there any way to adjust the vertical gaps between menu items, between list items, between combo box list lits? I am trying to make my Java application look like Windows application, but the vertical gaps in these Java components are just too big. Thanks!
Yu

Sorry for the massive bit of code, but you can use this to display the UI defaults and decide what to change if you want to try to affect (simple) global changes to the look and feel:
It's far from beautiful but I've found it helpful from time to time.
import javax.swing.JFrame;
import javax.swing.Icon;
import javax.swing.JLabel;
import javax.swing.JScrollPane;
import javax.swing.Box;
import javax.swing.BoxLayout;
import javax.swing.UIManager;
import javax.swing.UIDefaults;
import javax.swing.border.Border;
import java.awt.BorderLayout;
import java.awt.Graphics;
import java.awt.Component;
import java.awt.Color;
import java.awt.Font;
import java.awt.Insets;
import java.util.Iterator;
import java.util.Set;
import java.util.TreeSet;
import java.util.Comparator;
import java.util.Enumeration;
public class DefaultsDisplayer extends JFrame
     private static class ResourceLabel extends JLabel
          private ResourceLabel(Object key, Object value)
               super(key.toString());
               if(value instanceof Icon)
                    setIcon(new SafeIcon((Icon)value));
               else if(value instanceof Color)
                    setIcon(new ColorIcon((Color)value));
               else if(value instanceof Font)
                    setIcon(new ColorIcon(null));
                    setFont((Font)value);
               else if(value instanceof Border)
                    setIcon(new ColorIcon(null));
                    setBorder(new SafeBorder((Border)value));
               else if(value instanceof String)
                    setIcon(new ColorIcon(null));
                    setText(key.toString() + ": '" + value.toString() + "'");
               else
                    setIcon(new ColorIcon(null));
                setText(key.toString() + ": " + value.getClass().getName());
     private static class SafeIcon implements Icon
          private Icon icon;
          private SafeIcon(Icon icon)
               this.icon = icon;
          public int getIconWidth()
               return icon.getIconWidth();
          public int getIconHeight()
               return icon.getIconHeight();
          public void paintIcon(Component comp, Graphics g, int x, int y)
               try
                    icon.paintIcon(comp, g, x, y);
               catch(Exception e)
     private static class ColorIcon implements Icon
          private Color color;
          private ColorIcon(Color color)
               this.color = color;
          public int getIconWidth()
               return 32;
          public int getIconHeight()
               return 32;
          public void paintIcon(Component comp, Graphics g, int x, int y)
               if(color == null)
                    return;
               g.setColor(color);
               g.fillRect(x, y, 32, 32);
     private static class SafeBorder implements Border
          private Border border;
          private SafeBorder(Border border)
               this.border = border;
          public Insets getBorderInsets(Component c)
               try
                    return border.getBorderInsets(c);
               catch(Exception e)
                    return new Insets(0, 0, 0, 0);
          public boolean isBorderOpaque()
               return border.isBorderOpaque();
          public void paintBorder(Component c, Graphics g, int x, int y, int w, int h)
               try
                    border.paintBorder(c, g, x, y, w, h);
               catch(Exception e)
     private static class ObjectComparator implements Comparator
          public int compare(Object o, Object p)
               String s = o.toString().toLowerCase();
               String t = p.toString().toLowerCase();
               return s.compareTo(t);
     public DefaultsDisplayer()
          super("Default Displayer");
          setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          Box box = new Box(BoxLayout.Y_AXIS);
          UIDefaults defaults = UIManager.getDefaults();
          Set keys = new TreeSet(new ObjectComparator());
          for(Enumeration e = defaults.keys(); e.hasMoreElements(); )
               keys.add(e.nextElement());
          Object key, value;
          JLabel label;
          for(Iterator i = keys.iterator(); i.hasNext(); )
               key = i.next();
               value = defaults.get(key);
               label = new ResourceLabel(key, value);
               box.add(label);
               box.add(box.createVerticalStrut(5));
          getContentPane().setLayout(new BorderLayout());
          getContentPane().add(new JScrollPane(box), BorderLayout.CENTER);
          setLocation(50, 50);
          setSize(500, 500);
          doLayout();
          setVisible(true);
     public static void main(String[] args)
          new DefaultsDisplayer();
}

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 DROP DOWN (VERTICAL) MENU SHOWING HORIZONTALLY IN IE8

Hi guys,
im having hard time figuring out how to fix my spry drop down menu on IE8. when rolled over, it lines up horizontally instead of vertically. please check the site:
http://www.rebeccabrooksphotography.com/ and roll over the A bit about and Galleries.
hope you experts can help me. please!
here's the HTML code:
<!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" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<title>Rebecca Brooks Photography</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="A Community Based WordPress Theme" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/hoverintent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link rel="stylesheet" href="pagenavi-css.css" type="text/css" media="screen" />

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div class="rss"></div>
<div id="header">
    <div class="logo">
      <h1><a href="#" title="TemplateAccess Theme">A TemplateAccess.com Theme</a></h1>
    </div>
<div class="topnav">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="index.html">Home</a></li>
        <li><a href="aboutme.html" class="MenuBarItemSubmenu">A bit about</a>
          <ul>
            <li><a href="#">Me</a></li>
            <li><a href="#">Your Shoot</a></li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="#">Galleries</a>
          <ul>
            <li><a href="#">Hello World</a></li>
            <li><a href="#">Little & then no so</a></li>
            <li><a href="#">Family</a></li>
            <li><a href="#">The Look of Love</a></li>
            <li><a href="#">My Wanderlust</a></li>
          </ul>
        </li>
        <li><a href="#">Client Viewing</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="pricing.html">Pricing</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
      <div class="clr"></div>
</div>
    <div class="clr"></div>
</div>

<div class="body2">
    <div class="header_text">
      <div id="slider">
        
        <div id="slideshow">
          <div class="slider-item"><a href="#"><img src="images/simple_img_1.jpg" alt="screen 1" width="920" height="374" /></a></div>
          <div class="slider-item"><a href="#"><img src="images/simple_img_2.jpg" alt="screen 2" width="920" height="374" /></a></div>
          <div class="slider-item"><a href="#"><img src="images/simple_img_3.jpg" alt="screen 3" width="920" height="374" /></a></div>
          <div class="slider-item"><a href="#"><img src="images/simple_img_4.jpg" alt="screen 4" width="920" height="374" /></a></div>
          <div class="slider-item"><a href="#"><img src="images/simple_img_5.jpg" alt="screen 5" width="920" height="374" /></a></div>
        </div>
        <div class="clr"></div>
      </div>
    </div>
    <div class="clr"></div>
</div>

</div>

<div id="page-bot">
<div class="bloog">
    <p>© Rebecca Brooks Photography. All Rights Reserved.</p>
</div>
<div class="clr"></div>
</div>

<div id="footer">
<div class="footer_resize">
    <div class="fr"><strong><br />
    </strong></div>
    <div class="clr"></div>
</div>
<div class="clr"></div>
</div>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
========
here's the css file:
@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: 0px;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-color: #454545;
/* 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;
background-color: #454545;
/* 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: 11px;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
background-color: #454545;
font-family: Arial, Helvetica, sans-serif;
word-spacing: normal;
letter-spacing: 0px;
color: #454545;
height: auto;
clear: none;
/* 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;
background-color: #454545;
/* 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;
background-color: #454545;
width: auto;
float: left;
list-style-type: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
height: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 11px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 140px;
background-color: #454545;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: 0 0 0 95%;
background-color: #454545;
/* 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: 0px;
width: auto;
background-color: #454545;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
background-color: #454545;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #454545;
color: #CCC;
text-decoration: none;
padding-top: 2px;
padding-right: 13px;
padding-bottom: 2px;
padding-left: 13px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #454545;
color: #FFF;
font-size: 11px;
/* 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: #454545;
color: #FFF;
float: none;
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;
background-position: 95% 50%;
background-color: #454545;
font-size: 11px;
/* 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: none;
background-repeat: no-repeat;
background-position: 95% 50%;
width: auto;
background-color: #454545;
font-size: 11px;
/* 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-repeat: no-repeat;
background-position: 95% 50%;
background-color: #454545;
font-size: 11px;
/* 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: none;
background-repeat: no-repeat;
background-position: 95% 50%;
font-size: 0px;
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;
.MenuBarItemSubmenu ul li {font-size:11px;}

Add the following styling to your document, making sure that this comes after the menubar styling that you have already got inplace.
ul.MenuBarHorizontal ul li {
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
    border-bottom: solid 1px #EEE;
Gramps

Iframe flashing Spry Vertical menu

Hi All,
Im having an issue with the Spry Vertical Menu with flyouts.
It appears that the iframe used for the IE hack is flashing
on the screen whenever I rollover a menu item with a flyout in it.
Anyone having this same issue? Any help would be much
appriciated as I like the new Spry Widgets but I cannot have
glitches such as these... thanks
Here is my CSS:
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 82px 0px 0px 26px;
padding: 0;
list-style-type: none;
font-size: 1em;
cursor: default;
width: 14.5em;
/* 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: 0px 0px 0px 0px;
list-style-type: none;
font-size: 1em;
position: relative;
text-align: left;
cursor: pointer;
width: 14.5em;
/* 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: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
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: 8.2em;
background-color:#620808;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
text-decoration:none;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #000;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
font-size: 1em;
padding: 0.5em 0em 0.5em 2em;
color: #dfc398;
text-decoration:none;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-image:url(../images/office/side_menu_rollover.jpg);
background-repeat:no-repeat;
background-position:6px 8px;
color: #FFF;
text-decoration:none;
/* 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
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.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
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
display: inline;
f\loat: left;

ok... no sooner than I hit submit... figured it out...
If anyone comes across this, it seems just add width:0,
hieght:0 to the following css:
/* 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;
width:0px;
height:0px;
Happy coding!

Spry vertical menu bar size issue

hello world,
i've got a beautiful layout with a lefthand menu section that i would love to behave with pop-out menus.
the entire design was crafted lovingly in fireworks and then exported as html with images, then opened in dreamweaver - looks great!
remove the image that was in the slice where the menu will go, check.
place cursor and select insert>spry>menu bar, select orientation, check.
remove extraneous menu items in the properties inspector, check.
and then, the problem...the box where "Item 1" (which will become my first button) is too big and shifts the entire table out of shape.
i've edited the box sizes in the following CSS items:
ul.MenuBarVertical
ul.MenuBarVertical li
ul.MenuBarVertical a
sometimes i can get it close to it being in-shape with no shifting if i make the menu box smaller than the image that will go in it, looks great in DW but it is then shifted down by a considerable amount when previewing in browers. any pointers will be greatly appreciated.

hi hans
i can't upload at the moment, don't have the password to the site at the moment.
for now the best i can do is post the CSS, and let you know that the size of the image i'd like to place in the parent spry menu is 168w x 32h (in px)
i hope this isn't too much text....here goes:
/* 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: 150px;
    height: 25px;
/* 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: 150px;
    height: 25px;
/* 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: -5% 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    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: 8.2em;
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;
    background-color: #EEE;
    color: #333;
    text-decoration: none;
    height: 25px;
    width: 150px;
    padding-top: 0.5em;
    padding-right: 0.75em;
    padding-bottom: 0.5em;
    padding-left: 0.75em;
/* 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: #33C;
    color: #FFF;
/* 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: #33C;
    color: #FFF;
ul.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;

IE reversing order of spry menu items

I've created a horizontal spry menu bar, and it works great except for one problem. When I open my page in Internet Explorer, the order of menu items from left to right is reversed. For example, "Home", which is my first item in the menu, is supposed to appear on the left, but instead it appears on the right. The menu bar itself is in the correct position, it's just the menu items that are reversed. When I open the page in Firefox or Safari, the order is correct - it's just an IE problem. Any suggestions would be much appreciated. Thanks!

Thanks Ben, here's the code. I was doing some experimenting, and I changed the float property under ul.MenuBarHorizontal li.MenuBarItemIE to "right" instead of "left" as it is shown below. This caused the menu items to appear in the correct order, but it also caused the sub-menu items to appear in a horizontal line below the menu, when in fact they should be hidden until you hover over the corresponding item in the main menu. So I traded one problem for another! Any help would be much appreciated.
To see how it`s rendering, visit http://www.leagueheadquarters.com/RAB. If you look at it in Firefox, you`ll see how it`s supposed to look, and in IE you`ll see the menu items reversed.
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;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    font-family: Verdana, Geneva, sans-serif;
    font-variant: normal;
    text-transform: none;
    color: #1f3d73;
    float: right;
/* 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: 12px;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: auto;
    float: right;
    line-height: 13px;
    height: 16px;
    font-family: Verdana, Geneva, sans-serif;
    font-variant: normal;
    font-style: normal;
    color: #1f3d73;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    width: 8.7em;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 7em;
    text-align: left;
    height: 25px;
    background-color: #1f3d73;
    border-color: #FFF;
    border-right-style: solid;
    border-right-width: thin;
    border-left-style: solid;
    border-left-width: thin;
    border-bottom-style: solid;
    border-bottom-width: thin;
/* 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
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #fff;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #1f3d73;
    color: #1f3d73;
/* 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: #1f3d73;
    color: #96B0E2;
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;
    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-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-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-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
    background: #1f3d73;
    float: left;

Bar in between Menu Items

Hello,
Can you advise how to create those tiny vertical bars in between each menu item, as shown above, using CSS3.
I am trying to import a "line.gif" as shown, but it needs to be repeated and shortened as well.
#header {
          background-color:#39F;
          height:100px;
          margin-bottom:0px;
          background-image: url(line.gif);
          background-repeat:repeat-y;
          background-position:20px;
Kindly advise

Add a white border onto the list item. You would need to modify the styles below to suit your design but the border-right would be the simplest way of doing this.
<nav>
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li class="last">List Item Four</li>
</ul>
</nav>
li {
padding:5px;
border-right:1px solid #fff;
display:block;
li.last {
border-right:none;

Unwanted space under menu item

When hovering over a menu item, the item turns red. However, you can still see a little bit of the yellow background along the bottom. Can anyone tell me what I need to fix to get the red box to fill the space? Thanks.
@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;
    cursor: default;
    width: 960px;
    font: bold;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: inherit;
    cursor: pointer;
    width: 160px;
    float: left;
    border: 0;
/* 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: 160px;
    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;
    text-align: left;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 160px;
/* 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;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #f6ead6;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #80290e;
    color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #80290e;
    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: right;
    background: #FFF;

Looks like it was just a minor bit of extra coding. Remove the line height here. Seems to fix it for me.
a:hover, a:active, a:focus {
    line-height: 1.2;    text-decoration: none;

Artifacts between Logo and Vertical Menu Bar

See http://www.ottawapatentagency.com
Artifact #1: a light grey dot at the joint between the logo and the vertical menu bar, on the right hand side.
Artifact #2: on mouse over 'Home' - the top menu item of the vertical menu bar - there appears a light-colored, 1-pixel separation between the logo and the vertical menu bar.
The logo is a standard gif and the vertical menu bar is a standard spry menu bar, I am puzzled.
Anyone has a solution?

You could try adding the following code above your closing </head> tag:

Also, it looks like you need to add closing brackets to the following two lines:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"
<link rel="icon" href="/favicon.ico" type="image/x-icon"

Vertical Menu Items Height

Similar Messages

Maybe you are looking for