Vertical menu appears horizontally in IE8

I have a Spry vertical menu that I set up on the left side of my web page. It looks fine in Firefox and Safari but in IE8 it appears horizontally at the bottom of the page.
Is there a hack I can use for IE to fix that?
Please view: http://www.tabardtheatre.org/aboutUs.html

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

Similar Messages

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

Navigation in Spry Vertical menu is horizontal at bottom of page in IE8

My vertical menu appears correctly in Firefox and Safari but when I checked it from Internte Explorer 8 on a PC it doesn't show up in the left column as it's supposed to; instead it shows up horizontally at the bottom of the content area, just above the footer. Here's a link: http://www.tabardtheatre.org/aboutUs.html .
Is there a hack I can use to correct this?

Hope this from the Chrome forum helps.
http://www.google.com/support/forum/p/Chrome/thread?tid=6d78452432a4c4d7&hl=en

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

Spry Menu Appears different in IE8 and IE7

All,
As most of the people who post on this site I am new to Dreamweaver CS4. I think I've done a pretty good job and programming my site and my skills will only get better with time. However I am having one issue that I have wrestled with all day. The site I am creating is located at http://www.greenehazel.com/beta. The spry menu looks fine if I access it with IE8, but when I access it in IE7 some of the rows appear on top of other rows etc. I have fiddled with the CSS on this for most of the day and can't figure out why this is occuring. I have attached the CSS below. What am I doing wrong? Any help is greatly appreciated in advance.
@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; list-style-type: none; font-size: 100%; cursor: default; width: auto; padding: 0; padding-top: 5px; text-align: center; } /* 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: left; cursor: pointer; width: 8em; float: left; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul { margin: 0; padding: 0; list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: 8.2em; position: absolute; left: -1000em; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; background-color: #000; border-color: #999; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { width: auto; } /* 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: 0px; background-color: #000; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul { border: 1px solid #CCC; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; background-color: #000; color: #FFF; text-decoration: none; text-align: center; } /* 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: #000; color: #00F; width: auto; text-align: center; } /* 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: #33C; color: #FFF; text-align: center; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenu { background-image: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenu { background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarHorizontal iframe { position: absolute; z-index: 1010; filter:alpha(opacity:0.1); } /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection { ul.MenuBarHorizontal li.MenuBarItemIE { display: inline; f\loat: left; background: #FFF; } }

@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;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
padding: 0;
padding-top: 5px;
text-align: center;
/* 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: left;
cursor: pointer;
width: 8em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
background-color: #000;
border-color: #999;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: auto;
/* 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: 0px;
background-color: #000;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #000;
color: #FFF;
text-decoration: none;
text-align: center;
/* 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: #000;
color: #00F;
width: auto;
text-align: center;
/* 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: #33C;
color: #FFF;
text-align: center;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Spry 2.0 menu not showing in IE8

I have a webpage with a horizontal and vertical Spry 2.0 menu on the page. Both menus work correctly in Firefox, Chrome, Safari, and IE9, but the vertical menu does not show at all in IE8. In addition in IE8 the browser scroll bar disappears when the vertical menu is added. The test page is http://www.njslom.org/001banner5.html
I am using CS5 and the Spry 2.0 Widget in an html template.
Any help at all would be appreciated.
[email protected]
Page 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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>



<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
body {
background-color: #EBEBEB;
margin-top: 0px;
</style>
<script src="/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
<link href="/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#MenuPublic1 {
background-color:#F2F2F2;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
            MenuItem, and MenuItemLabel
            at a given level all use same definition for ems.
            Note that this means the size is also inherited to child submenus,
            so use caution in using relative sizes other than
            100% on submenu fonts. */
font-weight: bold;
font-size: 12px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuPublic1FixedCentered br" rule bleow */
display:none;
.MenuPublic1LeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1RightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1FixedLeft {
float: left;
width: 70em;
.MenuPublic1FixedCentered {
float: none;
width: 70em;
margin-left:auto;
margin-right:auto;
.MenuPublic1FixedCentered br {
clear:both;
display:block;
.MenuPublic1FixedCentered .SubMenu br {
display:none;
.MenuPublic1Fullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuPublic1 .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
    For most items, we have to do top or bottom padding or borders only on the MenuItem
    or a child so we keep the entire submenu tiled with items.
    Setting this to 0 avoids "dead spots" for hovering. */
#MenuPublic1 .MenuItem {
padding: 0px 0px 0px 0px;
background-color:#F2F2F2;
border-width:0px;
border-color: #cccccc #ffffff #cccccc #ffffff;
border-style: none solid none solid;
#MenuPublic1 .MenuItemFirst {
border-style: none none none none;
#MenuPublic1 .MenuItemLast {
border-style: none solid none none;
#MenuPublic1 .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#ffffff;
background-color:#F2F2F2;
padding: 7px 28px 7px 28px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuPublic1 .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuPublic1 .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
font-style: normal;
background-color:#F2F2F2;
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;
#MenuPublic1 .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuPublic1 .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 4px;
#MenuPublic1 .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuPublic1 .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 4px;
#MenuPublic1 .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#F2F2F2;
color:#ffffff;
padding: 4px 12px 4px 5px;
width: 175px;
/* Hover states for containers, items and labels */
#MenuPublic1 .MenuItemHover {
background-color: #69adee;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1 .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
#MenuPublic1 .MenuItemHover .MenuItemLabel{
background-color: #69adee;
color: #000000;
#MenuPublic1 .SubMenu .MenuItemHover {
background-color: #69adee;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1 .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #69adee;
color: #000000;
/* Submenu properties -- First level of submenus */
#MenuPublic1 .SubMenuVisible {
background-color: #F2F2F2;
min-width:0%; /* 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:0px;
border-style: none none none none;
#MenuPublic1.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
     and your personal taste.
     0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
     on MenuItemContainer and MenuItem on the parent
     menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
     the dropdown with the left of the menu item label.*/
z-index:10;
#MenuPublic1.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuPublic1 .MenuLevel1 .SubMenuVisible {
background-color: #F2F2F2;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
    vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
    to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuPublic1 .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1 .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1 .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
</style>
<script type="text/xml">

</script>
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuPublic1_2 */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
      and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuPublic1_2 so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuPublic1_2 {
background-color:#8ca7d2;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
            MenuItem, and MenuItemLabel
            at a given level all use same definition for ems.
            Note that this means the size is also inherited to child submenus,
            so use caution in using relative sizes other than
            100% on submenu fonts. */
font-weight: bold;
font-size: 12px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuPublic1_2FixedCentered br" rule bleow */
display:none;
.MenuPublic1_2LeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1_2RightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuPublic1_2FixedLeft {
float: left;
width: 175px;
.MenuPublic1_2FixedCentered {
float: none;
width: 175px;
margin-left:auto;
margin-right:auto;
.MenuPublic1_2FixedCentered br {
clear:both;
display:block;
.MenuPublic1_2FixedCentered .SubMenu br {
display:none;
.MenuPublic1_2Fullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuPublic1_2 .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
    For most items, we have to do top or bottom padding or borders only on the MenuItem
    or a child so we keep the entire submenu tiled with items.
    Setting this to 0 avoids "dead spots" for hovering. */
#MenuPublic1_2 .MenuItem {
padding: 0px 24px 0px 0px;
background-color:#8ca7d2;
border-width:0px;
border-color: #cccccc #ffffff #cccccc #ffffff;
border-style: none solid none solid;
#MenuPublic1_2 .MenuItemFirst {
border-style: none none none none;
#MenuPublic1_2 .MenuItemLast {
border-style: none solid none none;
#MenuPublic1_2 .MenuItem .MenuItemLabel{
text-align:left;
line-height:1.4em;
color:#ffffff;
background-color:#8ca7d2;
padding: 6px 10px 6px 10px;
width: 175px;
.SpryIsIE6 #MenuPublic1_2 .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuPublic1_2 .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
font-style: italic;
background-color:#0066ff;
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;
#MenuPublic1_2 .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuPublic1_2 .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 4px;
#MenuPublic1_2 .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuPublic1_2 .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 4px;
#MenuPublic1_2 .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#0066ff;
color:#ffffff;
padding: 4px 12px 4px 5px;
width: 175px;
/* Hover states for containers, items and labels */
#MenuPublic1_2 .MenuItemHover {
background-color: #cae9fd;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1_2 .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #cae9fd; /* consider exposing this prop separately*/
color: #000000;
#MenuPublic1_2 .MenuItemHover .MenuItemLabel{
background-color: #cae9fd;
color: #000000;
#MenuPublic1_2 .SubMenu .MenuItemHover {
background-color: #69adee;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuPublic1_2 .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #69adee;
color: #000000;
/* Submenu properties -- First level of submenus */
#MenuPublic1_2 .SubMenuVisible {
background-color: #0066ff;
min-width:0%; /* 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:0px;
border-style: none none none none;
#MenuPublic1_2.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
     and your personal taste.
     0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
     on MenuItemContainer and MenuItem on the parent
     menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
     the dropdown with the left of the menu item label.*/
z-index:10;
#MenuPublic1_2.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuPublic1_2 .MenuLevel1 .SubMenuVisible {
background-color: #0066ff;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
    that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
    vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
    negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
    to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuPublic1_2 .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #cae9fd; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1_2 .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #69adee; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuPublic1_2 .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
.text-white { color: #FFF;
</style>
</head>
<body>
<table width="950" border="0" align="center" cellpadding="7" cellspacing="0">
<tr>
    <td width="284" bgcolor="#0000CC"><strong class="text-white">Serving Municipal Government in <br />
New Jersey Since 1915</strong></td>
    <td width="305" bgcolor="#0000CC"><div align="center"><div align="center">    
<table style="background-color:#004d8c" cellspacing="0" cellpadding="0" border="0">
<tr><td>
<form style="margin:0;" method="get" action="http://www.picosearch.com/cgi-bin/ts.pl">
<input type="hidden" name="index" value="520788" />
<table style="background-color:#004d8c" cellspacing="2" cellpadding="0" border="0">
<tr><td><a href="http://www.picosearch.com/cgi-bin/index.pl?wherefrom=picobox&type=allhttp://www.picosearch.com/cgi-bin/index.pl?wherefrom=picobox&type=all"></a></td>
<td align="right"><input type="text" name="query" value="" size="20" />
<input type="submit" value="GO" name="search2" /></td>
</tr>
</table>
</form>
</td></tr></table>
<span style="white-space: nowrap;">
</span></div></div></td>
    <td width="319" bgcolor="#0000CC"><div align="right" class="text-white"><a href="http://www.njslom.org" class="text-white"><strong>HOME</strong></a> | <a href="http://www.njlmef.org" class="text-white"><strong>NJLM Educational Foundation </strong></a></div></td>
</tr>
</table>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
<tr>
    <td width="135"><img src="/images-head/head-logo-1.jpg" width="128" height="200" /></td>
    <td width="815" valign="top"><p> </p>
      <p> </p>
      <p> I will be adding the Spry Content Slideshow in this area</p>
    </td>
</tr>
</table>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="2" bgcolor="#F2F2F2"><ul id="MenuPublic1">
      <li> <a href="#">Classifieds</a>
      <ul>
        <li><a href="#">Classifieds & Job Listings</a></li>
      </ul></li>
      <li> <a href="#">NJ Municipalities Magazine</a>
        <ul>
          <li> <a href="#">Current Issue</a></li>
          <li> <a href="#">Advertise</a> </li>
          <li> <a href="#">Subscribe</a> </li>
          <li> <a href="#">Submission Guidelines</a></li>
        </ul>
      </li>
      <li> <a href="#">Seminars & Events</a>
      <ul>
        <li><a href="#">Events & Registration</a></li>
        <li><a href="#">CEU Requirements</a></li>
      </ul>
      </li>
      <li> <a href="#">Legislation</a>
        <ul>
          <li><a href="#">Legislative Committee</a></li>
          <li><a href="#">Legislative Priorities</a></li>
          <li><a href="#">Legislative Bulletin</a></li>
          <li><a href="#">Conference Resolutions</a></li>
      </ul></li>
       <li> <a href="#">Issues & Documents</a>
        <ul>
          <li><a href="#">Issue Alerts</a></li>
          <li><a href="#">Press & Media</a></li>
          <li><a href="#">Publications</a></li>
          <li><a href="#">Sample Resolutions</a></li>
          <li><a href="#">League Testimony</a></li>
      </ul></li>
       <li> <a href="#">NJLM Directories</a>
        <ul>
          <li><a href="#">Staff</a></li>
          <li><a href="#">Executive Board</a></li>
          <li><a href="#">League Officers</a></li>
          <li><a href="#">League Attorneys</a></li>
          <li><a href="#">League Affiliates</a></li>
          <li><a href="#">League Committees</a></li>
      </ul></li>
        <p>
          <script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuPublic1
var MenuPublic1 = new Spry.Widget.MenuBar2("#MenuPublic1", {
      widgetID: "MenuPublic1",
   widgetClass: "MenuBar MenuPublic1LeftShrink",
   insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
        </script>
    </p></td>
</tr>
<tr>
    <td width="175" valign="top" bgcolor="#F2F2F2"><p> </p>
      <ul id="MenuPublic1_2">
        <li> <a href="#">Home</a></li>
        <li> <a href="#">Entertainment</a>
          <ul>
            <li> <a href="#">TV Listings</a></li>
            <li> <a href="#">Music</a>
              <ul>
                <li> <a href="#">Hits</a></li>
                <li> <a href="#">Ragga</a>
                  <ul>
                    <li> <a href="#">Roots</a></li>
                    <li> <a href="#">Reggaeton</a></li>
                    <li> <a href="#">Dancehall</a></li>
                  </ul>
                </li>
                <li> <a href="#">Country</a></li>
              </ul>
            </li>
            <li> <a href="#">The Dirt</a>
              <ul>
                <li> <a href="#">Hollywood</a></li>
                <li> <a href="#">NY Beat</a></li>
                <li> <a href="#">London Scene</a></li>
              </ul>
            </li>
            <li> <a href="#">The Web</a></li>
          </ul>
        </li>
        <li> <a href="#">Politics</a></li>
        <li> <a href="#">Sports</a>
          <ul>
            <li> <a href="#">Football</a></li>
            <li> <a href="#">Baseball</a></li>
            <li> <a href="#">Basketball</a></li>
            <li> <a href="#">Racing</a>
              <ul>
                <li> <a href="#">F1</a></li>
                <li> <a href="#">Indy Car</a></li>
                <li> <a href="#">Stock Car</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
      <script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuPublic1_2
var MenuPublic1_2 = new Spry.Widget.MenuBar2("#MenuPublic1_2", {
      widgetID: "MenuPublic1_2",
   widgetClass: "MenuBar MenuBarVertical MenuPublic1_2MenuBarVerticalLeftShrink",
   insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
      </script>
<p> </p></td>
    <td width="773" valign="top" bgcolor="#F2F2F2">
      <p>EditRegion3</p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p>This is the bottom of the page</p>
    </td>
</tr>
</table>
</body>
</html>

I get the following error message
Perhaps you could have a look at KB927917
Gramps

Vertical Menu Problem

I am trying to get the sub-menu to simply flyout just ABOVE the parent menu, instead of the default in which is appears just below.
I played around with the margin settings to no avail, but I took the setting "top: 0;" and changed it to "bottom: 100%;" and viola! that did it in all browsers but IE. (IE7 and IE8) In explorer, the sub-menu still appears below the parent.
I tried many different settings but to no avail - can someone please help with this?
I can provide my code/example if needed but alls I did to test this is just open a blank html page, insert vertical menu - then changed the settings mentioned.....thats it.
Thank you!

The position of Spry Menu Bar submenus is controlled by the CSS margin property on submenu ul tags.
Locate the ul.MenuBarVertical ul rule.
Change the margin: -5% 0 0 95%; default values to the desired values.
http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS895F3A6D-6D73-42ef-B568-3D04A BD2F171.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Spry Vertical Menu Arrow Cursor

I have created a vertical menu, I am using the word immunization in the menu. The problem that I am having is the pointer at the end of immunization is on the n at the end of the word. I have tried resizing every area up to 12 em, but it just doesn't move that arrow. The arrow seems stuck in the same place. I tried downsizing the font, but the arrow stays on the n no matter how small I make the font. Anyone know how to move the arrow?

The arrow is applied as a background image, applied to the a text.
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%;
Although the comments indicate that the arrows are positioned on the far left, they are actually positioned on the far right, 95% of the distance from the left edge of the element.
The a element has been set as a block element (it takes up the entire li in which it resides) and has been given a padding, which allows the background arrow space to appear, clear of text:
ul.MenuBarVertical a
     display: block;
     cursor: pointer;
     background-color: #EEE;
     padding: 0.5em 0.75em;
     color: #333;
     text-decoration: none;
If your arrow is bumping your text, and the arrow is the size you want, increase the horizontal (left and right) padding...boldened in the quote above...to make the li wider. If this does not suit, you can also increase the percentage distance from the left a few percentages, to fully nest the arrow in the right padding.
Beth

Vertical menu with vertical submenu's

Hi,
I would like to create a vertical menu with vertical submenu's. So when you click on a menu item, it slides open and reveals the submenu items. I tried to combine different accordion widgets together and also to combine an accordion with a vertical menu, but this got all quite messy, especially when I previewed it. It seems such simple feature (Muse is using it for its own menu structures, for example the widget-library) so I find it strange that it is not available in the library or somewhere else online...
Thanks for your advice!

Hi
How exactly you have tried with accordion ?
With accordion widget this can be achieved , as label the items as main menu and sub menu items.
For example , insert an Accordion , name the label as Main and insert other elements in container area and then link them to specific pages.
You can also , try to insert an accordion with rotation so that the menu items should appear with horizontal expansion.
These video should help you :
http://www.youtube.com/watch?v=dQy_lj0ZXss
http://www.youtube.com/watch?v=_LYbjPQnw9k
Thanks,
Sanjit

How do i customize the states in a vertical menu bar?

i see that it is possible to change the states for a horizontal venu bar, but i can't get it to work for the vertical one. please tell me we can edit the states in a vertical menu bar.
valerie

Yes, you've hit a bug in Muse, that will be fixed in the next release.
The bug happens when you have a gradient fill for the default state, but no gradient fill for your other state. The vertical menu has this look by default. You can work around it by removing the gradient in the default state, or adding a gradient for the other states.

Is there a way to create a vertical menu for tablet that stays in place?

I am a novice in web design, and I want to make a vertical menu for a tablet page that stays in place.
It should not scroll, and it has to resize depending on screen size, so it looks the same across different tablet sizes.
Is this possible in Muse? After reading some posts I am getting the feeling this is not possible at all, is that really true?
If it can't be done in Muse, can I do it another way? In Dreamweaver for instance?
The reason I want this is that in my opinion horizontal menu's for tablets are ergonomically bad design, and just plain annoying. You always have to use two hands, lift one hand and then you probably block the view of the screen.
Vertical menu's for tablets just make more sense since they can be made so that you could place them on the side of the screen so it would be possible to navigate with the hand that is holding that side of the tablet.
I hope someone can help me.

Yes, I am using the widget.
It seems it is not possible to make the menu stick in tablet design (the pin options are greyed out). Nor is it possible to make the menu scale with screen sizes.
A possible solution would be the ability to make it stretch to 100% screen size, like you can with horizontal objects.
I have noticed though, that, for some reason, in web design it is discouraged or very hard to make things stretch 100% vertically. It seems to cause problems, and I don't understand why.
Since I have started in web design, I have seen many posts of people having design problems, where stretching 100% vertically would be the obvious solution.

Spry vertical menu problem with IE

We implemented the spry vertical menu for showing the
categories of a products catalog. It has almost 1800 categories
organizad at about 5 levels, some categories have about 30
subcategories. These categories are extrated from a database.
It works in mozilla but in IE present this problem:
- The response time is slow when you change from one category
to ahother. And the effiecience decrease.
See in
http://edit.panamericana.com.co/
Thanks,
Alejandro

I tried in Firefox 3 and IE7 and they both seemed fairly slow
for any action to take place. But IE7 did seem pretty slugish.
It seems that you're already determined what the issue is,
you have waaaaaay too many menu items. Seems to me that that number
of items don't belong in a menu. There are even menus that are too
long to appear entirely on the page, so they can't be easily
accessed without accidentally hiding the menus again, which I did
several times. IN particular:
Cartuchos > Technologica
If you cannot change to a different format to show all of the
items, then perhaps you can split up the menu so that you don't
have too many at one time. I checked the code of your page and it
seems that you've got a lot of other scripting going on there
besides Spry, so is the issue with Spry or with everything else
you're trying to do with that menu. If you can try to recreate the
page with only the menu items on it (and not pulled in dynamically
on the fly), and then add back to your page a bit a time, you might
be able to find out what is really causing the delays.

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

IE Issue Using Vertical Menu

I wonder whether someone can help me. I have used spry menu in dreamweaver and works ok in Safari and Firefox however in IE 7 the menu appears in two lines. You can see this on www.sancere.com/index and also when you click onto Asian weddings. Is there something I can do to stop this.
I have enclosed the IE css
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
f\loat: left;
Also I want to highlight the current page in a colour to help indicate what page you are on how can I do this?

The link above is broken to due to the lack of a file extension.
Should be www.sancere.com/index.html
Removing this hack works for me in IE7 and IE8:
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
f\loat: left;

Vertical menu appears horizontally in IE8

Similar Messages

Maybe you are looking for