Spry menu - horizontal - submenu default open

i want to have a submenu of one tab open by default on one page rather then when you hover over it. how can i do that? in the css?

All right. Add a class to the ul you want to be open, as
<ul class="open">
Then add a style to your stylesheet:
ul.MenuBarHorizontal ul.open
      {left: 0;
       top: 95%;
You should not need to add id's to actual list items (unless you want to specifically change their colors...)
By giving the submenu (the ul inside the ul.MenuBarHorizontal) a left:0;, you are pulling it in from left-field, where it had been at -1000em and also dropping it to nearly below (95%) the top menu.
You're not tricking the javascript. The javascript will still be working. But the visible submenus will just already be visible instead of hiding and being brought onstage by the javascript. If it's any consolation, the javascript could care less...
If you are working with templates, you can give each submenu ul an id, give the body an editable attribute (so you can change the body id for each page) and set up something in the CSS that controls, for instance:
<body id="contactuspage">
<ul class="MenuBarHorizontal>
     <li>...
          <ul id="contactus">
and in the CSS:
#contactuspage ul.MenuBarHorizontal ul#contactus,
#aboutuspage ul.MenuBarHorizontal ul#aboutus
     {left: 0;
       top: 95%;
So all you have to do is make sure you have set the body id (it could be the id of the container for the menubar...not the menubar itself, though) for each page, and the "show submenus" will automatically apply to the submenus that correspond to the page.
Beth
I'm not sure that this works in all browsers. I'm getting patchy results...It appears that you will have to play with the "top:95%;" call...Internet Explorer drops the top of the submenu to 95% down the WINDOW/viewport, and not just to the bottom of the top menu item. If you have a set height on the top menu item, give that as the value for top.
OK. It looks pretty solid, if you take my comment in the previous paragraph to heart.
Have fun with it!
B

Similar Messages

Help with vertical spry menu bar submenu displaying incorrectly!

I’m new to Dreamweaver and am learning as I go. I am having a problem with the vertical spry menu bar submenu in the Live View. When I scroll over the spry menu bar option that has a submenu, the submenu appears in the upper right hand corner of my screen. (My menu bar is going down the left hand side.) However, when I preview it in Internet Explorer it looks fine after I allow the Java Script to run or the Active X controls, which my browser usually automatically blocks. (The browser just displays a small message along the top and I click on it to allow it.) To get it to do this much, I had to play around with the CSS for the spry menu bar a little bit.
Before, when I clicked on the Live View option, a small message ran along the top in Dreamweaver saying it couldn’t find the Flash Plugin and asked me to download the most recent FlashPlayer, which I did twice. It continued to say that and then I just closed that message that kept popping up, but I think that has something to do with the problem. I then researched that problem in the Spry Framework Help and Dreamweaver Help, but couldn’t find a solution that worked. (Someone had posted a link for downloading the Flash Player for Netscape Navigator, but that didn’t seem to do anything.)
Please also note that I am using one of Dreamweaver’s pre-built layouts. I don’t know if that makes a difference with this problem.
How do I fix this problem so that it displays correctly in the LiveView? And will the message that I get on my browser about allowing blocked content appear on other people’s computer when they open my website?

IE is a big problem child among browsers. Don't use it as your default browser.
For best results, build your site to display & perform well in the web standards browsers like Firefox, Chrome, Safari & Opera. If it works in one, it should work pretty much the same in all of them.
After you're satisfied with how your site looks in the good browsers, then test in IE. If needed, add hacks or conditional comments to make IE behave. There are many web sites that discuss known bugs in IE and how to work around them.
Lastly, the active X nag screens only appear locally. Once deployed on the remote server, you won't see them.
For better answers to your layout questions, we need to see your page. Can you post a URL?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Gap in second level spry menu (Horizontal menu)

Hi,
I wonder if anyone can help me?!!
I've been developing a new website for my shool, with a horizontal spry menu bar. It all works fine, but when you select the third level menu on the spry, a gap emerges between the second and third level. Whislt it doesn't effect the functionality, it doesn't look very good!
I've attached a picture below to illustrate the problem, as you can see when the user clicks on the "For Parents" submenu, the next level, (starting with "Heads Welcome"), is seperated.   Please, please, please, can anyone tell me how to fix this, I'm getting desperate!
Thank you so much in advance.

Hi, Thank you Gramps. I'll have a play with a new Spry and see how it looks. I have tried to adapt my current one, and it seems to work well in Safari, Chrome or IE8, but doesn't work on my computer running IE9? Any ideas? Thanks again,Richard
Date: Thu, 8 Dec 2011 18:17:42 -0700
From: [email protected]
To: [email protected]
Subject: Gap in second level spry menu (Horizontal menu)
    Re: Gap in second level spry menu (Horizontal menu)
    created by altruistic gramps in Spry Framework for Ajax - View the full discussion
Have a look at the following. I used an un-adulterated CSS
html
body
#header
ul.MenuBarHorizontal
ul.MenuBarHorizontal li
ul.MenuBarHorizontal ul
ul.MenuBarHorizontal a {
    background-color: #000271;
    color: #FFF;
    padding: 0.5em 2.2em;
ul.MenuBarHorizontal ul li
ul.MenuBarHorizontal a.MenuBarItemSubmenu
@media screen, projection {
    ul.MenuBarHorizontal li.MenuBarItemIE     {
        background: transparent;
[Home | HomeFT.html]
[About Us | #]
[For Parents | #]
[Heads Welcome | Head's Welcome FT.html]
[Curriculum | Curriculum FT.html]
[Beyond The Classroom | Beyond the clasroom FT.html]
[Extra Curricular Activities | Ex Curr FT.html]
[Houses | Houses FT.html]
[Year Groups | Year Groups FT.html]
[Achievements | Achievements FT.html]
[Assessment | Assessment FT.html]
[Who's Who | Whos Who FT.html]
[Facilities | Facilities FT.html]
[Forms/Documents | Forms and Docs FT.html]
[Virtual Tour | Virtual Tour FT.html]
[For Students | #]
[Heads Welcome | Head's Welcome FT.html]
[Beyond the Classroom | Beyond the clasroom FT.html]
[Extra Curricular Activities | Ex Curr FT.html]
[Houses | Houses FT.html]
[Year Groups | Year Groups FT.html]
[Achievements | Achievements FT.html]
[Assessment | Assessment FT.html]
[Who's Who | Whos Who FT.html]
[Facilities | Facilities FT.html]
[Forms/Documents | Forms and Docs FT.html]
[Virtual Tour | Virtual Tour FT.html]
[Join Us | #]
[Admissions | Admissions FT.html]
[Prospectus | #]
[Whole School | 12 page Cottesloe School Prospectus 2010.pdf]
[6th Form | sixth form prospectus 2011.pdf]
[Vacancies | Vacancies FT.html]
[Friends of Cottesloe | FOC FT.html]
[Calendar | Calendar Events FT.html]
[Calendar Events | Calendar Events FT.html]
[Term Dates | Term Dates FT.html]
[Exam Dates | Exam Dates FT.html]
[Communications | #]
[Letters Home | Letters Home FT.html]
[Newsletters | Newsletters FT.html]
[News | News FT.html]
[Sports Communications | Sports News FT.html]
[External Links | External Links FT.html]
[Site Map | Site Map FT.html]
[Richards Test Page | Richards Test Page FT.html]
[Contact Us | Contact Us FT.html]
[Supporting Learning | #]
[Independent Learning | Independent Learning FT.html]
[VLE | http://learning.cottesloe.bucks.sch.uk/]
[SAM Learning | https://www.samlearning.com/]
[Parental Guidance | Parental Guidance FT.html]
[Student Guidance | Student Guidance FT.html]
[LINC | LINC FT.html]
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", );
</script>
</body>
</html>
Gramps
     Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4072864#4072864
     To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4072864#4072864. In the Actions box on the right, click the Stop Email Notifications link.
     Start a new discussion in Spry Framework for Ajax by email or at Adobe Forums
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

How to make Spry menu and submenu backgrounds different

Hi all. I have a horizontal spry menu bar, and i'm using a gradient image for the background of the main menu, but I want the submenu to just be a solid color. I figure i should just be able to use css for this solid BG, but I can create an image no problem if need be. I just think it looks unprofessional to have multiple segments of a horizontal gradient stacked vertically. I know this is possible, the second to last example on this link demonstrates but doesn't explain:
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
I would greatly appreciate any available help on this subject! Thanks again!

Thanks for asking, no that is not my complete css file. Those are only *additional* lines to place adjacent to existing styles in your "SpryMenuBarHorizontal.css", but in each case as the next style, in the location I have indicated. Here, I'll put my complete file here for you:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 100%;
     cursor: default;
     width: auto;
/* 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;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
     width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
     position: absolute;
     margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
     left: auto;
     top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
     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: #EEE;
     padding: 0.5em 0.75em;
     color: #333;
     text-decoration: none;
ul.MenuBarHorizontal ul a {
     background-color: yellow;
/* 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;
ul.MenuBarHorizontal ul a.MenuBarItemHover, ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal ul a.MenuBarSubmenuVisible {
     background-color: green;
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;
.fleft {
     clear: none;
     float: left;
The idea with putting the new styles *after* the original styles is that they are logically similar to but 'sub' styles to existing styles. In fact, you could probably put them way at the bottom, but if you wanted to edit them you might not find them again easily. I was trying to keep similar style rules together.
Z

Spry Menu Bar Submenu won't show in Safari or Dreamweaver LiveView

I am trying to get my submenu to show up on my website's spry menu bar. It will show up when I test the site using firefox or IE but it won't show when I try LiveView in Dreamweaver or when I test using Safari. The site is www.fuseut.com/fuse
Here are is the CSS for the menubar:
@charset "UTF-8"; /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ ul.MenuBarHorizontal {      margin: 0;      padding: 0;      list-style-type: none;      font-size: 100%;      cursor: default;      width: auto; } /* 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: 125px;      float: left;      font-family: "MS Serif", "New York", serif;      overflow: visible; } /* 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: 50;      cursor: default;      width: 7em;      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: 7em; } /* 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: 0;      top: 0; } /******************************************************************************* 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;      padding: 0.5em 0.75em;      color: #FFF;      text-decoration: none;      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;      text-align: center;      background-image: url(../menubgdefault.png); } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {      color: #FFF002;      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } /* 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 {      color: #FFF002;      text-decoration: underline;      font-weight: bold; } /******************************************************************************* 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%;      background-color: #999; } /* 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 here is 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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FUSE UT</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script type="text/javascript">

</script>
<meta name="Keywords" content="fuse ut utk university of tennessee tommy jervis avery howard ross rowland angie sessoms sga campaign elections" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menubarparent" style="z-index: 20; position: absolute; overflow: visible;">
<div id="menubar" style="z-index: 10;">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.html">FUSE</a>      </li>
    <li><a href="senators.html" class="MenuBarItemSubmenu">Senators</a>
      <ul>
        <li><a href="#">Untitled Item</a></li>
      </ul>
    </li><li><a href="executive.html">Executive</a>      </li>
    <li><a href="policy.html">Policy</a></li>
    <li><a href="organizations.html">Organizations</a></li>
    <li><a href="bios.html" class="MenuBarItemSubmenu">Bios</a>
      <ul>
        <li><a href="#">Untitled Item</a></li>
      </ul>
    </li>
</ul>
</div>
</div>
<p>
<p>
<div id="apDiv1">
    <div id="apDiv4"></div>
    <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="265" wmode="transparent">
      <param name="movie" value="Components/CandidatesHomeSlideshow.swf" />
      <param name="quality" value="high" />
       <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object type="application/x-shockwave-flash" data="Components/CandidatesHomeSlideshow.swf" width="550" height="265" wmode="transparent">
        
        <param name="quality" value="high" />
          <param name="wmode" value="transparent" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        
      </object>
      
    </object><div id="HomeEvents">
      <p> </p>
      <p> </p>
      <div id="EventsXML">
        <div spry:region="event2">
          <dl spry:repeatchildren="event2">
            <dt>{date}</dt>
            <dd>{title}</dd>
            <dd>{location}</dd>
          </dl>
        </div>
      </div>
    </div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Sorry if it's something really basic...I'm a noob to web design.
Thanks!

Don't use reserved words in JS
var event = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
event is such a reserved word. If you change this to event1 then all is well.
I hope this helps.
Ben

Spry Menu with submenu border?

Hi Everyone,
I'm a bit of a newbie, and I am designing a website with a spry menu (which I have since found out probably wasn't the best way to go) and I have hit a hurdle which I can't fix or find the solution to anywhere. I'm hoping it might be easy for you guys.
I have attached a pic of the problem, one menu item has a submenu, this is the 'About' menu, as you can see, it has a border top and bottom that I can't seem to find in the code in order to get rid of it. If anyone could let me know how to fix this I'll be extremely grateful!
Also, any suggestions of better menu methods would be appreciated.
Have a nice day
Spry CSS below:
@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
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 100%;
    float: none;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 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 KN: width changed to auto */
ul.MenuBarHorizontal li
    margin: 0;
    list-style-type: none;
    font-size: 18px;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    white-space: nowrap;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: bolder;
    text-transform: uppercase;
    padding: 0;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    float:none;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
/*ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration. KN: I removed the border radius prior to this it was border-radius: 5px 5px 0px 0px;*/
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding-left: 1.1em;
    padding-right: 1.1em;
    padding-top: 1em;
    padding-bottom: 1em;
    text-decoration: none;
    color: #009007;
    border-bottom: 2px;
    border-right: 0.3px #333333;
    border-bottom-color: rgb(51,51,51);
    background-image: url(../Images/spry-menu%20chrome.jpg);
    background-position: right;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #333;
    background-image: url(../Images/spry-menu-chrome-hover.jpg);
/* 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-image: url(../Images/spry-menu-chrome-hover.jpg);
    color: #333;
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%;
    color: rgb(0,141,7);
    background-image: url(../Images/spry-menu%20chrome.jpg);
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-color: rgb(3,139,7);
/* 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-position: 95% 50%;
    background-image: url(../Images/spry-menu-chrome-hover.jpg);
    color: #333;
/* 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-position: 95% 50%;
    background-image: url(../Images/spry-menu-chrome-hover.jpg);
    color: #333;
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;
        float: left;
        background: #FFF;

Hi Gramps,
Here is the site:
http://www.wordartist.com/mythicharacters
If you hover on "Sacred Arts", you'll see the behavior.
Thanks for taking a look at this,
Phlange98

Spry Menu-overlapping submenu items

Hello,
I am new to Dreamweaver. I created a horizontal spry menu and one of my items has a submenu which contains two items. When I look at the page in live view or preview it in a browser, the two submenu items overlap. How do I fix this? I have tried playng around with the margin values for "ul menubarHorizontal ul ul" but I do not see any changes. Please help me! Thank you so much!

No way of knowing without seeing a link to your page.

Spry menu horizontal question

I was wondering if it was possible to edit the spry menu so
that the sub menus showed up as a horizontal line below the main
links something like this
{the initial state would look like this}
home | about us | contact us
{then if you rolled over about us it would look like this}
home | about us | contact
about us submenu1 | about us submenu 2 | about us submenu4

Came across the fix by accident thru extensions in menu bar,
and choice of cursor for each section. Feeling happy! Happy New
Year everyone.

Problem spry menu horizontal

I've got a problem with my spry menu and i can't fix it. Probably its a simple solutions when you know it. My spry menu is correctly showing in Firefox but not in Internet Explorer 8 on windows. I use spry 1.6.1. This is the website http://www.debestebaan.nl

vw2ureg wrote:
Hi David,
Please have a look at the following selectors and change the rules accordingly
ul.MenuBarHorizontal
   margin: 0 0 0 20px;
    padding: 0;
    list-style-type: none;
    font-size: 16px;
    cursor: default;
    width: auto;
    height: 91px;
    position: relative;
    font-weight: bold;
    font-family: Corbel, Chiller;
ul.MenuBarHorizontal li
   margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
@media screen, projection
   ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;
Dit moet helpen.
Ben
Thanks, the problem is solved. Now i can finish my site.
Het heeft geholpen. Bedankt

Spry menu bar submenu disappears when cursor changes

Hello.
I've been working with a spry menu bar for some time, but when I expand the submenu and then move the cursor over some text on the page (where the sub-menu is on top of), the submenu disappears. In other words, it seems that when the cursor changes from a pointer to a text cursor, the submenu disappears.
Can anyone tell me how to prevent that from happening?

LICAP Webmaster wrote:
Can anyone tell me how to prevent that from happening?
Sorry, but without a link to your online page, it's a time-wasting, error-prone guessing game.
If you put your test page and all dependent files online, and post a link here, we will gladly check that:
    Your server is working
    That all required HTML code is correct
    That your folder hierarchy is correct
    That all required dependent files (HTML, CSS, JS, Images etc.) are uploaded to proper folders
    That Javascript Versions are correct
    That link paths are all correct and case sensitive
Sounds like your submenus may be positioned with a small gap from your top-level links

Center Spry Menu Horizontal Bar

My spry menu bar has 7 items with no sub menus.
The menu looks fine but it's up against the left hand border and I am having a terrible time trying to center on the page.

TerryGV, David Powers has given you the best advice, and you have followed it...and it works!
Dreamweaver is not a push-button, automated, all-is-fixed-in-a-single-click type of program. Results with those programs are restricted to the actions that can be pre-supposed by the engineers.
With Dreamweaver, you have the freedom and breadth of possibilities (and sometimes the labor) that come with that lack of second-guessing by others.
What you have done is basic CSS. Once you get a good understanding of Cascading Style Sheets, you will find you will not be wishing for automated solutions as much.
Beth

Spry Menu Bar Submenu not dropping.

Hi,
I,ve got a problem with the Spry Bar Menu Bar....The Submenu is not dropping when I preview the page in a browser. Would be great if somebody could help me out here.
Many thanks in advance.

Hello Wiebke,
to my knowledge that's not a reason. Murray has often answered to ftp problems, last thing I've noticed was: "If the files are being uploaded to the correct location, then they must overwrite the existing files in that location. If you are not seeing those changes in the browser, then you must be looking at a stale page in the browser - dump your local browser cache and try again. So, make sure that the files are being properly uploaded, and that your browser is fully refreshed." and from osgood "Have you tried an alternative ftp upload client other than Dreamweaver?".
The last hint is that what I prefer. In all in these cases I'm not a friend of a detailed troubleshooting. It is one of the reasons that I prefer an external FTP program. The difficulties with which you have to fight encourage me in this opinion, not least because we always search for experts, we don't charge a "jack of all trades".
For this reason, to manage, for example, several websites or to upload my files and sometimes for the opposite way, for a necessary download from my server or to use a "a site-wide synch", I'm using FileZilla. It simply looks easier for me to keep track of all operations precisely and generate or reflect easily the desired tree structure.
Above all, FileZilla has a feature (translation from my German FileZilla) called "compare file list". Here it's possible to use file size or modification time as a criterion. There is also the possibility to "hide identical files", so that only these files which you want to redact remain visible.
And even if it means you have to install a new program, I am convinced that there is an advantage. Here is the link to get it and where you can read informations about how it works:
http://filezilla-project.org/ and
http://wiki.filezilla-project.org/Tutorial#Using_the_site_manager
Mac: Mac OS X
http://filezilla-project.org/download.php
Of course, you also need all the access data to reach your server.
Good luck
Hans-Günter

Spry Menu - Horizontal

Website that's being worked on ::
http://shilohsteel.com/Edit
I'm not sure really where to post this so I'm sorry if it's
in the wrong place.
In firefox [of course] everything works as it should..but in
IE [which sadly I have to code this to work in] the sub menu
appears at the top of the screen, not next to the parent that calls
it.
Please help!
-Tabbi

Anyone? Please!

Spry menu changes - How to:

First. I'm not a developer or programmer. I'm a hacker (dabble unknowingly by trial and errororor).
I looked deeply for how to change font characteristics and found nothing helpful except comments that it can't be done or BEWARE! Horse puckey! Don't believe that all you can change is font, background and color.
I needed to change the font size and width of the bars in my Spry menu. This is how I did it and the details are for others to trial and error it themselves.
I created a page with a Spry menu (horizontal for me) and populated it to three levels. The first time you use Spry it will copy the necessary files into your directory and create a .css file you can see in that directory. You can open up the Spry menu and see the .css parameters, which isn't helpful at all. You can, also, open up the .css file as a window pane, which is what you need.
Next, open up your browser and use it to open the file you are using for test purposes (the .html, not the .css file). Now you can get an idea of what your file will look like in a browser on the Internet. Change back to the Dreamweaver window. Make sure you have the "SpryMenuBarHorizontal.css" (or vertical).
Go to the menu . . . Windows > CSS Style and make sure the CSS Styles tab with ALL selected is showing. If the tab only shows the tree view, drag from the bottom slider bar upward to show both the tree view and the Properties view. Now you're ready.
Do this one step at a time ready to undo any changes you don't like.
Set the window pane to the SpryMenuBarHorizontal.css page. Go down the list of Rules in the CSS Panel until you find one that you think might change what you want.
Make the SINGLE change.
Save the change.
Change to the browser and click on Refresh. The changes will show up. Make sure you test each level.
Go back to the Dreamweaver .css pane and either change it back or try the next one.
You will find you can add properties not noted in other discussion or instructions.
I wanted to change both font size and button width. I found that in the Rules I made these changes that worked just fine.
ul.MenuBarHorizontal - I changed the font size from 100% to 60% and got a smaller font universally in the menu.
ul.MenuBarHorizontal ul li - I changed the width from 8.2 ems to 16 ems and had wider menu bars universally.
Experiment, try it, be adventurous! Just do it carefully and be ready to undo unwanted changes.

Other than additional specific changes, this was NOT a question for further discussion. It was simply a solution for others to find.

Spry menu showing up incorrectly IE6

Hi there,
My spry menu horizontal bar is showing up incorrectly in
IE6....
The buttons are meant to be maroon during hover, but they're
all the default blue, sometimes when you hover over them they turn
pink, sometimes blue, sometimes completely gray, the colors are all
messed up...
But it's fine in other browsers..... Please advice, thanks
cgbub

Even if it would be included as SSI your markup will still be wrong.
if your SSI is in the body, that means you will have a extra tittle tag and meta tag in the body of your page. Same would count for script and <link> tags.
If the SSI was in the head. Than your whole menu bar markup would also be in the <head> which isn't valid either.
Also, you menu is on the right side because:
ul.MenuBarVertical ul {
cursor:default;
font-size:100%;
left:100em;
list-style-type:none;
margin:-5% 0 0 101%;
overflow:visible;
padding:0;
position:absolute;
top:0;
width:169px;
z-index:1020;
You say it needs to be there due to the 100em left
For the underlines, in the ul.MenuBarVertical a css selector add the following property;
text-decoration:none;

Spry menu - horizontal - submenu default open

Similar Messages

Maybe you are looking for