Vertical Menu Background Wrong in IE

I have a vertical spry menu in the left column of a template with a top row, two columns in center, and a bottom row. I set a different background color for the menu items by setting ul.MenuBarVertical a {background-color: #f0f000;....} in SpryMenuBarVertical.css. It shows up correctly in DW, on the iPhone, on Firefox but not IE8. There the background color is only for the width of the text in the menu rather than the full width of the left column. How do I get this to work?

Please supply a link to your site.
Gramps

Similar Messages

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 background problem in IE

The background of the <li> items show as white on the spry menu items here. http://www.steveelson.com/index.html. Menu items are .pngs, but I've used the iepngfix.htc fix, but still have the problem in IE 8 and 9. So I assume it's a css problem, but can't figure it out.

Save a copy of the css file as you have altered it, but under a new name. You might want to save a copy of your menu, too, so you'll have something to refer to. Then delete your menu widget and re-insert it.
You will most likely be very surprised at how easy it is to style it up (referring from time to time to your saved, former stylesheet).
If your page works without your menu, you should be successful inserting your menu to it.
Beth

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;

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

CS3 Vertical menu

I am using spry to create two vertical menu bars on the same
page. But I want to apply different style and colour to each of
them. If I change anything on the Spry menubar vertical CSS, it
applies to all the menu bars items on the page. Do I need to create
another CSS, but how to link it to the second menu bar? I am a new
user of CS3, would appreciate any help on this. Thanks.
W. Chui

Hi Danilo, thank you for your response. I tried, but it
didn't work. I am not sure if I have done something wrong. Here is
SpryMenuVertical ccs I have changed according to my understanding
of your reply. I have spent 2 days trying to figure it out... I
hope you can help me. Thanks.
@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: 0;
padding: 0;
list-style-type: none;
cursor: default;
width: 150px;
ul.MenuBarVertical2
margin: 0;
padding: 0;
list-style-type: none;
cursor: default;
width: 150px;
/* 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: 11px;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
ul.MenuBarVertical2 li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 11px;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
/* 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 113%;
padding: 0;
list-style-type: none;
font-size: 11px;
position: absolute;
z-index: 1020;
cursor: default;
width: 150px;
left: -1000em;
top: 0;
ul.MenuBarVertical2 ul
margin: 0% 0 0 113%;
padding: 0;
list-style-type: none;
font-size: 11px;
position: absolute;
z-index: 1020;
cursor: default;
width: 150px;
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;
ul.MenuBarVertical2 ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 150px;
ul.MenuBarVertical2 ul li
width: 150px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
ul.MenuBarVertical2
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #999933;
ul.MenuBarVertical2 ul
border: 1px solid #FF9900;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #666600;
text-decoration: none;
ul.MenuBarVertical2 a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #FF9900;
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-color: #999933;
color: #FFF;
background-image: none;
ul.MenuBarVertical2 a:hover, ul.MenuBarVertical a:focus
background-color: #FF9900;
color: #FFF;
background-image: 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: #999933;
color: #EEE;
ul.MenuBarVertical2 a.MenuBarItemHover, ul.MenuBarVertical2
a.MenuBarItemSubmenuHover, ul.MenuBarVertical2
a.MenuBarSubmenuVisible
background-color: #FF9900;
color: #EEE;
SUBMENU INDICATION: styles if there is a submenu under a
given menu item
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 90% 50%;
height: auto;
width: 150px;
ul.MenuBarVertical2 a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 90% 50%;
height: auto;
width: 150px;
/* 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: 90% 50%;
ul.MenuBarVertical2 a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 90% 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;
background: #FFF;

Ideas for HELP sizing a photo to display as a menu background

Hey gang. I'm authoring in iDVD and have a photo with DVD credits that I want to display as a menu background. There won't be any buttons on the page. Just this image of DVD credits. The iDVD manual tells you to size photos for an NTSC 4:3 display at 720 x 540 pixels. However, when I drop it onto the menu, it automatically enlarges the image so that there's only a partial view of the image. The only adjustment that can be made is vertically. I've even tried shrinking the image with text and mounting it on a matte so that it appears in the TV safe viewing area, but no luck there. Same thing happens. Any ideas? If someone want to mess around with the image, let me know and i'll email it to you. Thanks!

hey there koshercuts, welcome to Discussions.
have you tried to edit your pic in iPhoto before dropping it into the iDVD menu? this is where you edit your pix, not in iDVD. also see this: http://www.danslagle.com/mac/iMovie/, Dan's site has a lot of great info, especially "Tips & Tricks".
good luck.

DVD menu background not working in some players only

I put together a DVD in DVDSP 3 which works fine on most players. However on some players the menu backgrounds are grey instead of the graphic that should be there, and the buttons all say "Introduction" instead of having the proper titles. The first Main Menu looks fine and works properly. But the other menus don't show the background images at all.
I've tried using JPG, TIF and MPEG-2 files for the backgrounds on those menus, but none of those file formats works. The buttons all function properly and go to the correct targets, but the button text is the same wrong text on all the buttons. Also, the transitions work fine. And the tracks all play fine. It's just the non-Main menus that have the problem, and only on some DVD Players.
The specific players that have the problem are the Sony DVP-NS55P and the Philips DVP3140, both set top players.
Has anyone seen this type of behavior? And fixed it?

I have a similar problem. When I create a movie background and test in the simulator, the movie doesn't play and I get the grey screen with all the buttons and menus. The DVD created only plays the movie background only after you click a button and it tries to move on to the next track. I have never had a problem before.

Spry Vertical Menu and sub menus not working correctly

I am designing a website for a client and cannot get the spry vertical menu and submenus to work correctly. The submenus will show on the index.html page, but not on any other pages, or when I preview in browser. Should I make it a library item then add it to the other pages? I am not sure what I am doing wrong. I appreciate your help!

URL to your site please

Spry Menu background is white in IE

I've created a vertical Spry menu with submenus. The menu should not have a background color, so it should take the color of the image it's on top of. This looks fine on Safari (Mac) and Firefox (Mac/Windows), but on IE 8 (Windows), the menu background is WHITE. This makes it difficult to see the menu items. What can I do so that the menu background is transparent and does not show up white in IE?
The site: http://chrysacupuncture.com
I'm attaching index.html, my own css file, and the Spry css file.
Thanks for your help.

Actually, now that I look at it, I think one of your IE hacks might be malfunctioning:
/* 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;
This is the bottom-most item in your CSS file. Notice the typo in the float:left and that it does indeed state a white background background:#FFF. I don't usually put IE hacks external CSS, you might try moving it to the main HTML file and using IECC. Place it in the header as you would if you had internal CSS:

I removed the background color altogether, but you may have to define one (I don't usually support IE5 so I'm not sure).
If you insist on having this hack externally, you can try placing the background: transparent in the first item of your CSS:
ul.MenuBarVertical
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     cursor: default;
     width: 9em;
     padding-top: 80px;
     background: transparent;

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: Drop left? Arrows?

2 Questions:
1. I am trying to figure out how to make a spry vertical menu drop to the left instead of the right? Any ideas?
2. It appears that my arrows are the same color as my background, therefor they are not showing up until the hover color changes. Can I change the colors of the arrows.
Thanks for the help!

Hi,
to have the subitems displayed to the left, go to this rule
ul.MenuBarVertical ul {} from SpryMenuBarVertical.css file and
change this line: margin: -5% 0 0 95%; TO margin: 0% 0 0 -95%;
Diana

Vertical Menu position problem

Hi everyone,
I'm trying to figure out how to manage the position of a vertical menu aligned on the left of the page.
I have a centered background image. Depending on the size of the browser window the position of the menu varies and appears off. How can I align it to some position so that it follows coordinates of the background image.
How would I go about to achieve this?
Thanks in advance,
JS

As JTANNA said in another discussion, our psychic powers don't work so well on holidays.
Please post a URL to your problem page. The answers to layout questions are in your code. Without seeing your page, all we can do is make wild guesses.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Links from 2nd vertical menu appear in submenu of 1st vertical menu

http://www.westhoustonairport.com/index_troubleshoot.shtml - Problem occurs in IE
I have five vertical Spry menus. Some of the menus have submenus. Go to PHOTO COLLECTION first, and the submenu looks good. Then go to either HANGARS / OFFICES or HISTORY in the third vertical menu, and you'll see that the submenus contain links from the fourth vertical menu.
As a temporary fix, I switched PHOTO COLLECTION (which has a submenu) with ON-AIRPORT BUSINESSES (no submenu), which you can see here:
http://www.westhoustonairport.com. There is no problem now because the fourth column no longer contains links with submenus.
I, however, need to change the links back to the previous order. What is causing the links to appear in the previous column's submenu? Thank you.

The following is where you should specify the menu items background color
ul.MenuBarVertical a
     display: block;
     cursor: pointer;
     /*background-color: #000ECE;*/
     padding: 0.5em 0.95em;
     /*color: #333;*/
     color: #FFF;
     text-decoration: none;
The browser and I do not understand the following style rule
ul.MenuBarVertical a.MenuBarItemSubmenu
     /*background-image: url(SpryMenuBarRight.gif);*/
     background-image: url(SpryMenuBarRightHover.gif);
     background-repeat: no-repeat;
     background-position: 95% 50%;
     display:!important;
Gramps

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;

Vertical Menu Background Wrong in IE

Similar Messages

Maybe you are looking for