Submenus not appearing using spry horizontal menubar

I am working on a MAC running MAC OS 10.5.6 and working in Dreamweaver CS4. I have inserted a spry horizontal menubar with two levels of submenus. None of these submenus is showing up when I try and test the menubar.
Thank you, Mary Pat

Similar Messages

Spry Horizontal Menubar Submenus offset in Explorer

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

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

Cell column width using spry horizontal menu

Hi
Trying to set the cell column width using DWCS5.5 Spry Horizontal menu.
view-source:http://www.roatan.ws/spry-menu-bob
I used help to get directions and I think I did it correctly but I do not know for sure.
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
          background-color: #356A68;
          float: none;
          background-color:transparent;
          height: auto;
          width: auto;
Trying to clean up my site and get things working an looking right.
Any suggestions appreciated
bob

Spry menus do not contain any table columns or cells.    They are just lists <ul> <li> tags styled with CSS.
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 12px;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 8em; /**adjust top-menu width**/
    float: left;
    text-decoration: underline;
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 10px;
    z-index: 1020;
    cursor: default;
    width: 8em; /**adjust sub-menu width**/
    position: absolute;
    left: -1000em;
    background-color: #356A68;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Field on manual tabular appears using Firefox but does not appear using IE

Hello,
A field in a manual tabular form appears correctly using Firefox but does not appear or appears in another field when IE is used. Javascript is used to hide certain columns on the tabular form. Does anyone know how to solve this problem?
Thanks pany

Prabodh,
The select for the report and the javascript that is used to hide the columns are displayed below. The data for Apex_item.select_list_from_lov(12,null,'LOV_METHOD_OF_ACQ') is shown in the previous column, Date Acquired, and the column for Method Acquired is blank. It appears correctly in Firefox. Please let me know if this is sufficient.
Thanks,
pany
SELECT
apex_item.hidden(1, c011) status
,apex_item.checkbox(2,seq_id) checkbox
,apex_item.hidden(3, seq_id) seq_id
,apex_item.hidden(4,c001) Owner_Firm_Id
,apex_item.hidden(5,c002) Owner_Id
,apex_item.hidden(6,c003,10) First_Name
,apex_item.hidden(7,c004,10) Last_Name
,apex_item.text(8,c005,10) Number_Shares
,apex_item.text(9,c006,10) Percentage
,apex_item.text(10,c007,10) Class
,apex_item.date_popup(11,rownum, c008, 'MM/DD/YYYY',15) Date_Acquired
,apex_item.select_list_from_lov(12,c009,'LOV_METHOD_OF_ACQ') Method_Acquired
,apex_item.hidden(13,c010,10) Primary_Key
FROM apex_collections
WHERE collection_name= 'INTEREST_STOCK_COLL'
AND c011 IN ('O','N','U')
union all
select
apex_item.hidden (1,null) status
,apex_item.checkbox(2, null) checkbox
,apex_item.hidden(3, null) seqid
,apex_item.hidden(4,null,10) Owner_Firm_Id
,apex_item.hidden(5,null,10) Owner_Id
,apex_item.hidden(6,null,10) First_Name
,apex_item.hidden(7,null,10) Last_Name
,apex_item.text(8,null,10) Number_Shares
,apex_item.text(9,null,10) Percentage
,apex_item.text(10,null,10) Class
,apex_item.date_popup(11,1, null,'MM/DD/YYYY',15) Date_Acquired
,apex_item.select_list_from_lov(12,null,'LOV_METHOD_OF_ACQ') Method_Acquired
,apex_item.hidden(13,null,10) Primary_Key
FROM dual
Javascript
function hideCols(p_startOfTable, p_pageList, p_debug)
          alert("in function");
          var outStr = "Blanking Script:\n";
var debug = p_debug;
var offCols = p_pageList.split(":"); //string comes in colon delimited, split it
into array
var tbl = document.getElementById(p_startOfTable); //get the table from the page
html source
var rows = tbl.getElementsByTagName('tr'); //get the first row
var tds = tbl.getElementsByTagName('td');
var testStr;
outStr = outStr + "START tds length is " + tds.length + "\n";
if (debug)
alert(outStr);
          //START Clear Headers
var i, j, cells;
cells = rows[0].getElementsByTagName('th'); //get the headers
for (j = 0; j < offCols.length; j++)
cells[j].className = "hidden";
outStr = outStr + "i is " + i + " HEADER rows.length is " + rows.length +
"\n";
if (debug)
alert(outStr);
//END Clear Headers
          //START Clear TDs
          for (i = 0; i < tds.length; i++)
var attrib = tds.innerHTML;
var gNum = attrib.indexOf(" name=") + 7;
var colNum = attrib.substr(gNum, 2);
colNum = parseFloat(colNum);
for (j = 0; j < offCols.length; j++)
if (debug)
testStr = testStr + "\n" + "colNum is: " + colNum + " className is: " +
tds[i].className + " i is: " + i + " j is: " + j + "\n";
if (colNum == offCols[j])
if (debug)
alert("colNum is " + colNum);
if (tds[i].className == "datepicker")
if (debug)
alert("caught condition with i= " + i);
tds[i - 1].className = "hidden";
tds[i].className = "hidden";
tds[i + 1].className = "hidden";
//add popupLOV functionality here
//add radio button functionality here
// add other items that may have multiple <td>
else
//regular hideCol
tds[i].className = "hidden";
          //END Clear TDs
if (debug)
alert(testStr);
//document.write(testStr);
Edited by: PANY on Aug 12, 2010 8:25 AM

Satellite A300-15K: Polish character does not appear using shortcut key

Hi,
I am a fresh user of A300-15K and from the start I have discovered that it has combination of Alt+Ctr+C assigned to starting up ATI software (Catalyst Control Centre). Unfortunatelly this combination normally should produce Polish character "?" ( it doesn't look properly on this page somehow after I have copied it from Word - it is "c" with stong accent over it - here is its capital version "?").
I entered Catalyst Control Centre and unmarked the use of so called HotKeys (first this particular hotkey and then the use of hotkeys generally), but all I achieved was that Catalyst Control Centre stopped starting up after the combination usage.
However, the needed Polish character did not appear. I can get its capital version with Alt+Ctr+Shift+c, but no normal version.
A guy from service centre advised me to assign a different letter as startup combination for Catalyst Control Centre and I did, but it still did not make the Polish character appear.
I guess there must be a fault in regional settings so I tried to change them to English and back to Polish with zero result.
Please help with some word of advise.
Message was edited by: Koster62

Its easy to turn off.
Just enter the catalyst driver and there must be option like 'shortcut'. Turn it off.
I had the same problem.
I remember only it was really easy to turn off.
You shouldn't have problem with that.

Spry horizontal menubar in template

I created a template with a spry horizonal menubar. All seeams to work correctly in template but however when I create a page from the template the spry menubar turns into a long list. How can I fix this?

Home
About Us                      History           Locations
Services
Environmental Management                              Item 3.1.1               Item 3.1.2                                     Engineering & Design           Mapping & Surveying           Remediation & Contracting                         News       Careers       Contact                            Corporate Environmental Risk Management | Client Centered Solutions
Environmental
Engineeringg & Design
Remediation and Contracting
Surveying and Mapping
Safety Services
Markets => Federal | Government | Transportation | Real Estate
   tabs
@2010 C.E.R.M., Inc. All rights reserved | C.E.R.M. is an qual opportunity Employer
Website Designed by: Soleofga Technic LLC

Images not Showing using Spry

I am trying to learn xml, xsl, and how to use these with spry
with the client-side approach. I can get text to show up using the
dataset from the xml file and Dreamweaver spry regions in an html
file. However, images do not show up. When defining my spry xml
dataset in Dreamweaver, I showed my "image" element to be of the
image data type.
When testing this in Safari, it just says "undefined" where
I would expect to see an image. In Firefox, the text that I put
into the images element in xml shows up-- "/images/butterfly2.jpg"
Here is a link to the site where I am testing this:
http://myweb.cableone.net/mccook/books/
Here is my xml code:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="books.xsl" type="text/xsl"?>
<books>
<book>
<title>Making it Work </title>
<author>Clyde Best</author>
<image>/images/butterfly2.jpg</image>
</book>
<book>
<title>Making it Fail </title>
<author>Klutz Dweeb </author>
<image>/images/butterfly2</image>
</book>
</books>
And I don't know if the xsl file is even used in the
Dreamweaver spy process. If it is, let me know and I will post that
code too.
I would greatly appreciate assistance with this. I have spent
hours trying to solve the problem, to no avail.
Monty

"MontyC" <[email protected]> wrote in
message
news:f2j2c1$kso$[email protected]..
> When testing this in Safari, it just says "undefined"
where I would
> expect to
> see an image. In Firefox, the text that I put into the
images element in
> xml
> shows up-- "/images/butterfly2.jpg"
> Here is a link to the site where I am testing this:
>
http://myweb.cableone.net/mccook/books/
Due to a bug in Safari you can't use <image> as a tag
name in the XML.
Rename the tag and it willwork. Then blame Aple.
> And I don't know if the xsl file is even used in the
Dreamweaver spy
> process.
Not at all.
Massimo Foti, web-programmer for hire
Tools for ColdFusion and Dreamweaver developers:
http://www.massimocorner.com

Spry horizontal menubar

Hello,
I am trying to figure out how to change the dimensions of the
main menu bar (without affecting the submenus) of the spry widget.
I read the documentation but i just couldn't get it to work Can
anyone please point that out.
Is there an easy way of figuring out how to customize the
menu bar widget?
Thanks

This is part of code that i think i need to modify and that
is generated by dreamweaver when i added the spry widget. I am
trying to make the main menu bar slimmer. Right now it's too fat.
Any idea what property i need to modify?
I tried to change the box properties but I couldn't get it to
work
here is the link
http://test.karim.pcriot.com/gallery/index.html
Thanks a lot

Why some posts in facebook pages not appear using mobile view but appear with desktop view ?

The same problem occur with other browsers but not with facebook program

What type of post?
*Text/Image/Video
Many site issues can be caused by corrupt cookies or cache. In order to try to fix these problems, the first step is to clear both cookies and the cache.
The Firefox cache temporarily stores images, scripts, and other parts of websites while you are browsing. <br>
Note: ''This will temporarily log you out of all sites you're logged in to.''
To clear cache and cookies, do the following:
#Tap the menu icon located at the top right corner. This is the icon with 3 bars. On older Android devices you'll have to press the hardware menu key and then tap More.
#Tap '''Settings'''.
#After that, you will be taken to the settings screen. In the settings screen, look under the section '''''Privacy & Security''''' and select '''Clear private data'''.
#You will then be taken to a list of what can be cleared. Select the following 2 for deletion:
#*Cookies & active logins
#*Cache
#After those have been selected, tap the '''Clear data''' button to actually clear the cache and cookies.
Did this help you with your problems? Please let us know!

Audio track does not appear using Automate To Sequence

When I use the Automate to Sequence feature after arranging clips in a Bin, none of the associated audio files show up in Audio 1 but the video clips do show up in Video 1. When I do this on other computers it works fine. (This is a classroom setting.)

Start reading on mono and stereo tracks and project setup.

Photos folder not appearing using Home Sharing

My photos folder has stopped showing up in my home sharing section on AppleTV - it seemed to work fine a week or 2 ago but now has stopped working :-/ Music and movie still show however.
anybody have any ideas what may be the problem?
thanks guys!
N

fixed, I turned it off and on again :-/ (from within the iTunes sharing drop down) doh!

Spry Horizontal Drop Downs Don't Work in iOS

I designed a site a while ago in Dreamwaever using a horizontal Spry menu system. Whilst I tested it using all the common browsers and it works in all of them I discovered that the second level of sub menus didn't worl on the iPad and iPhones. Client was unhappy so I redesigned it with only one level of sub menu and all was happy with the world. He still is happy as he doesn't update his iPad, but I have discovered with my own iPhone that the drop downs don't work at all now. I am just starting to design another site and have used spry horizontal to test the holding page and this also doesn't work. I am using the very most up-to-date version of Dreamweaver as I have now used the subscription based system.
If Spry doesn't work on iOS then it is no use. Whilst I hate Apple's arogance with disallowing Flash, it is a very popular product and one cannot afford to design sites that can be read on iPads and iPhones.
Is there another way to make drop down style menus? Is there a fix for the Spry menus? I am not big on coding which is why I use Dreamweaver. I did try the version two of the Spry menus, but it appears that you have to hand code all the changes from the default set up and couldn't see any way of including images as I have done on this site.
The site I am using as an example is http://www.raj-bristol.co.uk/
Has anyone got any idea what to do about this problem?
Thanks
Ralph Ferrand
Vision Design UK Limited
www.vduk.co.uk

Spry is no longer being developed or supported by Adobe.
You would be much better off using jQuery Accordion: http://www.1stwebdesigner.com/freebies/jquery-accordion-menus-tutorials/
Or pure css/css3 menus: http://www.noupe.com/css/100-great-css-menu-tutorials.html
Arrogance has nothing to do with the lack of Flash on Apple products, well, maybe 10% arrogance:
http://www.apple.com/hotnews/thoughts-on-flash/
Adobe is also no longer developing Flash for mobile devices.
For video on mobile devices, HTML5 is the way to go now.

Spry Horizontal Menu Bar width problem in IE and Safari

Hi Everyone,
I am working on a template and have used Spry Horizontal Menu for quite a few sites now. This one is giving me problems though on the width of the navigation bar. It moves the last right menu item to the next row on the left in Safari and IE and Chrome, but looks perfect in Firefox. I'm using a googlefont for the text. As I have quite a few menu items I have them set to 'auto' width. Is there a fix to make all the others look like it does in Firefox or do I need to shorten my menu items by changing titles/reducing padding, etc.?
Working page can be viewed at www.ikanizi.com/index2.html
Many thanks.

Anyone who increases their browser's text size will see the same thing. For wiggle room, reduce top-level links from 11 to no more than 7.
Nancy O.

Vertical & Horizontal Submenus Do Not Appear in IE 7

Both the vertical and horizontal submenus of my Spry menu bars do not appear on hover, although other parent menu items (without submenus) do highlight on hover. The menus work fine in Safari and Firefox. I appreciate any assistance anyone can provide.
I have tried all the various solutions from help sites to no avail. I have also updated my Spry assets in Dreamweaver CS4 and used the recommended IE browser hacks. After many iterations, I got both main/parent menus to appear in the correct positions in IE 7, but the submenus will not drop right or down.
Attached is the link to my homepage:
http://www.leadermarkproperties.com/homepage.html
Following is the SpryMenuBarVertical.css (followed by the source code for the homepage):
@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
font-size: 100%;
width: 140px;
left: 0px;
top: 110px;
position: absolute;
list-style-type: none;
margin: 0px;
padding: 0px;
z-index: 1000;
/* 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
font-size: 100%;
list-style-type: none;
position: relative;
margin: 0px;
padding: 0px;
/* 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
list-style-type: none;
font-size: 100%;
cursor: default;
left: -980px;
position: absolute;
top: 0px;
z-index: 1020;
margin-left: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 140px;
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
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
cursor: pointer;
background-color: #6B629B;
color: #ECE6E0;
text-decoration: none;
font-family: Arial;
font-size: 8pt;
text-align: center;
font-weight: normal;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ECE6E0;
vertical-align: middle;
height: 30px;
display: block;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #33C;
color: #ECE6E0;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #33C;
color: #ECE6E0;
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-color: #6B629B;
background-position: 100% 100%;
/* 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-color: #6B629B;
background-position: 100% 100%;
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
background-color: #6B629B;
color: #ECE6E0;
display: block;
f/loat: left;
font-family: Arial;
font-size: 8pt;
Following is the source code for the homepage):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Leadermark Home Page</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<style type="text/css">

</style>
</head>
<body>
<div id="master">
<div id="apDivdownload">
<form><input type="button" value="Download" class="downloadbutton" onClick="window.location.href='leadermarkbrochure.pdf'"></form></div>
<div id="apDivcopyright"> © 2011 All rights reserved<br />
Leadermark Properties, LLC</div>
<div id="apDivnavfooter"><a href="sitemap.html">Site Map</a>   |  <a href="whyleadermark.html">Leadermark Commitment</a>   |  <a href="homepage.html">About Leadermark</a>   |   <a href="devinvexpertise.html">Development & Investment</a>   |   <a href="serviceslandingpage.html">Advisory & Consulting Services</a>   |   <a href="brokeragexpertise.html">Brokerage</a>   |   <a href="loginform.html">Clients & Investors</a>   |   <a href="feedback_form.html">Contact</a> </div>
    <div id="apDivheader">About Leadermark:<br />Diverse Skills, Experience & Perspective of<br />Real Estate Investment, Development & Brokerage</div>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv5"></div>
<div id="apDiv7"></div>
<div id="apDiv8"></div>
<div id="apDiv9"></div>
<div id="apDiv10"></div>
<div id="apDiv11"></div>
<div id="apDiv12"></div>
<div id="apDiv13"></div>
<div id="apDiv14"></div>
<div id="apDiv15"></div>
<div class="homepageboxlabel" id="apDiv16">Land Development</div>
<div class="homepageboxlabel" id="apDiv18">Build-To-Suit</div>
<div class="homepageboxlabel" id="apDiv19">Master-Planned Communities</div>
<div class="homepageboxlabel" id="apDiv20">Mixed-Use</div>
    <div class="homepageboxlabel" id="apDiv21">Office</div>
    <div class="homepageboxlabel" id="apDiv22">Industrial</div>
    <div class="homepageboxlabel" id="apDiv23">Residential & Homebuilding</div>
    <div class="homepageboxlabel" id="apDiv24">Construction & Engineering</div>
    <div class="homepageboxlabel" id="apDiv25">Development Management</div>
    <div class="homepageboxlabel" id="apDiv26">Investment & Asset Management</div>
    <div class="homepageboxlabel" id="apDiv27">Brokerage</div>
    <div class="homepageboxlabel" id="apDiv28">Retail</div>
    <div class="homepageboxlabel" id="apDiv29">Leadermark Properties is a diversified real estate development, investment, brokerage, and services firm, providing its clients and investors the benefit of broad perspective and extensive experience in the creation of real estate value. Leadermark’s paradigm<br />for success is disciplined leadership with focus on the countless details of value generation.</p><p>Optimal value in the development, investment, and brokerage processes can only be achieved by those with diverse experience, perspective, and leadership skills supporting persistent and effective attention to the people, processes, and factors that can erode value. Our expertise spans the full spectrum of the real estate field: development, investment, construction, asset management, and brokerage; and our experience encompasses all types of property: office, industrial, retail, residential, and land development.</p>
    </div>
<div id="servicesvisionmantra">V i s i o n • P e r s p e c t i v e • L e a d e r s h i p</div>
<div id="leadermarkbrochure">LEADERMARK BROCHURE</div>
<ul id="MenuBar5" class="MenuBarVertical">
<li class="MenuBarVertical"><a href="#" class="MenuBarItemSubmenu">Vision, Perspective, Leadership</a>
<ul>
    <li><a href="theparadigm.html">The Paradigm of Real Estate Development & Investment</a></li>
    <li><a href="thevision.html">The Vision</a></li>
    <li><a href="therisks.html">The Risks</a></li>
    <li><a href="themythofthedeal.html">The Myth of "The Deal"</a></li>
    <li><a href="thechallenge.html">The Challenge</a></li>
    <li><a href="whowilllead.html">Who WIll Lead?</a></li>
<li><a href="lmwilllead.html">Leadermark Will Lead</a></li>
<li><a href="onleadership.html">On Business Leadership</a></li>
</ul>
</li>
<li><a href="whyleadermark.html">Why Leadermark?</a></li>
<li><a href="lmwillplan.html">Leadermark Will Plan</a>    </li>
      <li><a href="lmwillmanage.html">Leadermark Will Manage</a>    </li>
      <li><a href="lmwillcommunicate.html">Leadermark Will Communicate</a></li>
<li class="MenuBarVertical"><a href="devinvexpertise.html" class="MenuBarItemSubmenu">Diverse Development & Investment Expertise</a>
        <ul>
          <li><a href="devinvexpertise.html">Overview</a></li>
          <li><a href="officeexpertise.html">Office</a></li>
          <li><a href="industrialexpertise.html">Industrial</a></li>
          <li><a href="retailexpertise.html">Retail</a></li>
          <li><a href="landdevelopmentexpertise.html">Land Development</a></li>
          <li><a href="residentialexpertise.html">Residential</a></li>
          <li><a href="lbeexpertise.html">Location-Based Entertainment</a></li>
        </ul>
    </li>
      <li class="MenuBarVertical"><a href="diverseskills.html">Diverse Development & Investment Skills</a>    </li>
      <li class="MenuBarVertical"><a href="diversetechlexpertise.html" class="MenuBarItemSubmenu">Diverse Technical, Planning & Construction Expertise</a>
        <ul>
          <li><a href="diversetechlexpertise.html">Overview</a></li>
          <li><a href="planningexpertisetable.html">Planning & Design Management</a></li>
          <li><a href="aeexpertisetable.html">Architectural Engineering</a></li>
          <li><a href="constructionexpertisetable.html">Construction</a></li>
          <li><a href="structuralexpertisetable.html">Structural Engineering</a></li>
        </ul>
      </li>
      <li><a href="news1.html">Leadermark News</a></li>
      <li><a href="casestudies1.html">Case Studies</a></li>
      <li><a href="currentopportunities1.html">Current Opportunities</a></li>
      <li><a href="currentproperties1.html">Current Properties</a></li>
      <li><a href="currentprojects1.html">Current Projects</a></li>
</ul>
<div id="#servicesheader"></div>
<div class="logoboxcontroller" id="logo"></div>
<div id="LMPname">Leadermark Properties</div>
<div class="logoboxcontroller" id="logo"></div>
<div class="boxcontroller" id="services"></div>
<div id="ServicesHeaderText">Real Estate Development & Investment • Consulting & Advisory Services • Brokerage</div>
<div class="inforbarboxcontroller" id="infobar"></div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li class="MenuBarHorizontal" name="aboutleadermark">
      <div align="center"><a class="MenuBarItemSubmenu" href="#">The Leadermark Commitment</a>
        <ul>
          <li>
            <div align="center"><a href="theparadigm.html">Vision & Perspective</a></div>
          </li>
          <li>
            <div align="center"><a href="whyleadermark.html">Expertise</a></div>
          </li>
          <li>
            <div align="center"><a href="background.html">Leadership</a></div>
          </li>
        </ul>
      </div>
    </li>
    <li class="MenuBarHorizontal">
      <div align="center"><a href="homepage.html">About Leadermark</a></div>
    </li>
    <li class="menutextfont">
      <div align="center"><a class="MenuBarItemSubmenu" href="devinvexpertise.html">Development & Investment </a>
        <ul>
          <li>
            <div align="center"><a href="devinvexpertise.html">Expertise</a></div>
          </li>
          <li>
            <div align="center"><a href="serviceslandingpage.html">Services</a></div>
          </li>
          <li>
            <div align="center"><a href="currentprojects1.html">Current Projects</a></div>
          </li>
          <li>
            <div align="center"><a href="currentopportunities1.html">Current Opportunities</a></div>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <div align="center"><a href="serviceslandingpage.html">Advisory & Consulting Services</a></div>
    </li>
    <li>
      <div align="center"><a href="brokeragexpertise.html" class="MenuBarItemSubmenu">Brokerage</a>
        <ul>
          <li class="MenuBarHorizontal">
            <div align="center"><a href="brokeragexpertise.html">Expertise</a></div>
          </li>
          <li>
            <div align="center"><a href="acqdisposervices.html">Services</a></div>
          </li>
          <li>
            <div align="center"><a href="currentproperties1.html">Current Properties</a></div>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <div align="center"><a href="loginform.html">Clients & Investors</a></div>
    </li>
    <li>
      <div align="center"><a href="feedback_form.html" class="MenuBarHorizontal">Contact</a></div>
    </li>
</ul>
</div>
<div class="boxcontroller" id="body"></div>
<div id="logoboxholder"></div>
<div class="quotes" id="quotesbox"></div>
<script type="text/javascript">
</script>
</div>
</body>
</html>
Following is the SpryMenuBarHorizontal.css for the homepage:
@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;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 980px;
height: 40px;
top: 60px;
position: absolute;
z-index: 1000;
left: 0px;
/* 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: 140px;
float: left;
font-family: Arial;
top: 0px;
/* 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: 5000;
cursor: default;
width: 140px;
position: absolute;
left: -1000em;
background-color: #7D7469;
top: 35px;
/* 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
position: relative;
left: 0px;
top: 0px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 140px;
font-family: Arial;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
/* 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;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #ECE6E0;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #7D7469;
color: #ECE6E0;
text-decoration: none;
font-family: Arial;
font-size: 9pt;
height: 35px;
padding-top: 0.5em;
padding-right: 0.75em;
/* 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: #33C;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-color: #7D7469;
/* 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-color: #7D7469;
/* 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-color: #7D7469;
/* 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-color: #7D7469;
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;
filter:alpha(opacity:0.1);
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.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;

Gramps:
I am confused. What does your example have to to with Spry menu bar widgets, absolute positioning, and the reason my code will not drop down or right
the submenus in "Internet Exploder" ? Your code suggestions have no apparent relevance to the problem.
After a hundred iterations, I am close with my code above: it works flawlessly in all the other browsers and correctly positions the main menus in IE 7. It's only problem is that submenus do not pop up or down on hover over the main menu item. If I alter the main menu containers to relative position, the code breaks down in all browsers. Relative position seems a meaningless approach to correcting where ul.menubarvertical.ul or ul.menubarhorizontal appear. Javascript moves them into position from off screen on hover, not CSS positioning commands.
The problem seems to be not in CSS, style or absolute positioning - especially since the Spry widgets work fine in every other browser than the almighty IE - rather, it seems like the problem is the lack of compatibility in IE with Javascript, the mysterious engine of Spry assets that few of us seem to understand. We rely on the experts of costly software to guide us through the Javascript gauntlet so we do not have to learn it ourselves. The fact the menu will not load up on hover would seems to be a command incompatibility in Javascript with IE 7 (the submenus are initially off the screen to left), since everything in HTML appears appropriately in absolute position for all browsers. My amateurish guess is that Javascript alone moves the submenu from offscreen to on screen, not CSS style code. Does that seem a reasonable assumption?
Gramps, I appreciate your help, but wonder why the programmers of Spry at Adobe cannot come clean with a solution to a problem they created in a program they charge a considerable sum to license. This is not rocket science - as some of us who have been programming for decades would realize - rather, its voodoo: a silly idiosyncrasy of a low level language that neither Microsoft or Adobe care to address for idiots like me, who bought their software. I have even offered paid, expert web site development consultants to fix the problem, and they don't know their ***** from second base.
Is there no one out there to figure this glitch out in simple terms? This is not the Mission to Mars. Works in several browsers, but not in another: Why? There is a clue out there in the collective brain trust: they are just not sharing it with us mere mortals.
Gramps, thanks again for your help. You are a good person.

Spry Horizontal Menu Submenus Won't Appear - Help

OK, I have a Spry Horizontal Menu Bar done through DW CS5. The root menu items work just fine. And the arrow graphics indicating there are submenus are shown, however when you hover over the main menu item the submenus do not appear in browser preview. The spry menu bar is located in the header div above a main content div and a sidebar div (two column layout). Interestingly enough if I drop a new menu bar in the main content div with sample submenus it works fine, so the css file must be ok because they both read off the same css file.
My only assumption is there is something in the header code which conflicts with the submenus and is not allowing the submenus to appear. Unfortunately I can't post it only in a test location as I am reworking an existing website and when I post the new css file it will obviously change the existing website.
But here is some of the relevant code. First the HTML for the section in question.
I very much appeciate any advice.
Home
Biography
Blog
Riding
Resources
Provincial
Municipal
Federal
Education
Community
International
Liberal Party
Media
News Releases
Newsletters
Columns
Photo Gallery
Multimedia
RSS Feeds
Contact
Now the CSS for the menu bar:
@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: auto;      padding: 0;      list-style-type: none;      font-family: "Times New Roman", Times, serif;      font-size: medium;      font-weight: bold;      cursor: default;      width: auto; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive {      z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li {      margin: 0;      padding: 0;      list-style-type: none;      font-size: 100%;      position: relative;      text-align: center;      cursor: pointer;      width: 108px;      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 0 0 50%;      padding: 0;      list-style-type: none;      font-size: 80%;      z-index: 1020;      cursor: default;      width: 108px;      float: none;      position: absolute;      left: -1000em; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {      left: auto; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li {      width: 108px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul {      position: absolute;      margin: -5% 0 0 95%;      z-index:1030; } /* 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: none;      top: 0;      z-index:1040; } /******************************************************************************* 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;      padding: 5px 5px;      color: #FEFEFE;      text-decoration: none;       } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {      background-color: #323232;      color: #FEFEFE; } /* 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: #323232;      color: #FEFEFE; } /******************************************************************************* 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;      } }
And lastly the Css code for the whole thing...
@charset "utf-8"; body {      font-family: Verdana, Geneva, sans-serif;      margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */      padding: 0;      text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */      }       .twoColFixLtHdr #container {      width: 760px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */      margin: 0 auto auto auto; /* the auto margins (in conjunction with a width) center the page */      border: 2px solid #000;      text-align: left; /* this overrides the text-align: center on the body element. */      }       .twoColFixLtHdr #header {            padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */      border: 0px solid #000;             } .twoColFixLtHdr #header h1 {      margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */      padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */       } .twoColFixLtHdr #sidebar1 {      float: left; /* since this element is floated, a width must be given */      width: 200px;      font-size:12px;      color:#FEFEFE;      background: #000;      border-top-width: 1px;      border-right-width: 2px;      border-bottom-width: 2px;      border-left-width: 1px;      border-top-style: solid;      border-right-style: solid;      border-bottom-style: solid;      border-left-style: solid;      border-top-color: #000;      border-right-color: #660000;      border-bottom-color: #000;      border-left-color: #000;      padding-top: 1px;      padding-right: 0px;      padding-bottom: 1px;      padding-left: 1px; } .twoColFixLtHdr #mainContent {      margin: 0 0 0 204px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */      padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */      background:#660000;      } .twoColFixLtHdr #videomainContent {      margin: 0 0 0 200px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */      background: #323232;      padding-left:100px      } .twoColFixLtHdr #singleframe {      background: #323232;      }       .twoColFixLtHdr #footer {      padding: 0 10px 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */      font-size:12px;      color:#FEFEFE;      background:#000;      border: 1px solid #000;            } .twoColFixLtHdr #footer p {      margin: 0 0 0 270px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */      padding: 20px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */      clear:both;     height:0;     font-size: 1px;     line-height: 0px; } br{font-size:10px} a:link {color:#FEFEFE} a:visited {color:#FEFEFE} a:hover {text-decoration:none;} #mainContent a:link {color:#000; text-decoration:none} #mainContent a:visited {color: #000; text-decoration:none} #mainContent a:hover {      text-decoration:underline; } #mainContent a:active {color:#000;text-decoration:none} .red{     color:#4C0000;} .w1{font-size:14px;     color:#FEFEFE;} .w2{font-size:12px; color:#FEFEFE;} .w3{font-size:large; color:#FEFEFE;} .b1{font-size:14px; color: #000; font-weight:bolder} .sidehline{      float: left; /* since this element is floated, a width must be given */      width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */      padding: 0px 0px 0px 0px; }       .b{font-size:12px; color:#000000; } .topbtmmargin {      margin-top: 20px;      margin-bottom: 20px; } .SidebarPadding {      padding-top: 0px;      padding-right: 10px;      padding-bottom: 0px;      padding-left: 10px; } .FrontImage {      border: 5px ridge #323232;      float: left;      margin-right: 10px;      margin-bottom: 10px;      margin-top: 0px; } .FrontImageFltRgt {      border: 5px ridge #323232;     float: right;      margin-left: 10px;      margin-bottom: 10px;      margin-top: 20px; } .mapRgt {      float: right;      padding-left: 5px;      padding-bottom: 10px;      border: none;       } .sigRgt {      float: right;      padding-left: 5px;      margin-right: 60px;      padding-bottom: 10px;      margin-top: 10px;       } .textfntrgtcol {      padding-left: 200px;      font-size:12px;      color:#000000; } .textfntlftcol {      padding-right: 210px;      font-size:12px;      color:#000000; } .twoColFixLtHdr #container #mainContent ul li {      list-style-type: none;      list-style-position: outside;      list-style-image: url(images/blackbullet.gif); } .leftpicture {      border: 5px ridge #323232;      position: absolute;      z-index: 20;      height: 140px;      width: 180px;      margin-top: 10px;      margin-right: 10px;      margin-bottom: 10px;      margin-left: 210px;      left: 150px;      top: 326px; } img {      border-style: none; } .grooveimg {      border: groove; } #apDiv1 {      position:absolute;      width:200px;      height:115px;      z-index:1;      left: 0px;      top: 0px;      visibility: visible; } #apDiv2 {      position:absolute;      width:155px;      height:123px;      z-index:2;      left: 5px;      top: 4px;      visibility: visible; } #apDiv3 {      position:absolute;      width:335px;      height:122px;      z-index:3;      left: 173px;      top: 3px;      visibility: visible;      color:#FEFEFE; } #apDiv3 a:link {color:#FEFEFE} #apDiv3 a:visited {color: #FEFEFE} #apDiv3 a:hover {text-decoration:none;} #apDiv3 a:active {color:#FEFEFE} #apDiv4 {      position:absolute;      width:120px;      height:45px;      z-index:4;      left: 390px;      top: 105px;      visibility: visible; } #apDiv5 {      position:relative;      width:200px;      height:115px;      z-index:5; } .menubarWrapper {      background-color: #000;      float: left;      width: 100%; }

Move the constructor for the menu bar up to read as follows
<script type="text/javascript">

</script>
Gramps

Submenus not appearing using spry horizontal menubar

Similar Messages

Maybe you are looking for