Vertical Menubar Displaying Problem

Question

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

Answer 1

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 */