Spry submenus horizontal

I'm have successfully implemented spry horizontal menu but
now I want to use spry horizonatl menus where the submenu is also
horizontal. And, I can't seem be able to modify the
SpryMenuBarHorizontal.css to get the submenu to be horizontal in
both IE and Firefox. Anyone have a solution to this problem?
Thanks

Hi,
Sorry because I can't understand very well English and
perhaps I will answer something that ... you know...
But I tried your code, all like you have on your web, but
adding the "BROWSER HACKS: the hacks below should not be changed
unless you are an expert", and it works on IE6, IE7, FF2. Yes,
without that, on IE6, the page breaks.
You only need to add the last fragment that I understand you
have deleted. It works without any other modification on css. You
can update your version 1.4 to 1.6 too.
I hope that I have understood all well.

Similar Messages

Spry submenus not working while Included with SSI

I have customized and created my horizontal spry menu bar with the help of some tutorials on here, and I have pasted it onto a page without any html, head, or body tags. I have linked to the CSS files and javascript files in both the page being included and the page containing the include. But the Spry submenus wont work on the page with the include on it. But they work on the page being included.
I tried only referencing the javascript file with the page containing the include, and vice versa to no avail. Again, everything else works except the expansion of the submenus.
I am new to all of this, I only know what I have learned from doing tutorials and reading forums on this fabulous website. Has anyone encountered this problem or have a remedy? Thanks in advance.

I'm confused. The submenus in the spry menu on the included page work when I don't reference the external style sheets or the javascript in the page containing the include. Based on the explanation given by David Powers on this thread about how to use SSI with Spry, I thought all pages had to include the link to the javscript and style sheets:
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSEE4C0148-A6F4-4bf5-9DEF-CE06AB026214a .html
Problem solved? Or if anyone has an actual explanation for this, I will leave this question unanswered.
Sorry to be so quick to post...

Spry Submenus Not Visible on RHS only

My spry submenus work totally fine except for the very far
right hand side of the page where the submenus are cut off. I can
see the very beginning of the submenu but the rest of it with the
text is hidden once it goes past the edge of the page. Clicking on
the small part which is visible works, but users still need to see
the entire submenu. This is a problem only in Firefox (3.0.7) and
Safari (3.1.2). IE7 works fine where the submenus on the RHS are
clearly visible as I hover and they extend past the right hand edge
of the page. Thanks for any input.

I could see it on Safari.. it has a Beatles poster on the Home page and then others on the other pages...
Some flucky things happen with these browsers.
Peace,
Glen
iMac G3, G4, G5 Powerbook Mac OS X (10.4.4) iPods

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.

Spry Submenus falling all over themselves

What property do I need to adjust to space out my spry submenus?
I have submenus that need to have more then 5 or 6 words, they are both piling up on top of each other and expanding past the bounds of the background.
Help! please
Thanks.

It's hard to say without seeing what you're trying to do.
It's always best to provide a link to your page - upload *all* the files to a server and post a link.

Horizontal Spry submenus error in IE6

I have searched every horizontal menu post on this forum for
this answer. I have also edited every line in the CSS to see if it
was causing this problem. I don't know enough CSS to think up my
own CSS but have attempted some new things. My site is live and
getting about 300 visitors a day. About 60% of them are still using
IE6 so they are seeing my embarrassing disaster. I desperately need
help.
I designed and debugged my spry menu for Firefox and IE7.
But they are not working on IE6. My horizontal menu at
www.pocatellocvb.com pushes
the page content down. I need to fix it ASAP.
Here is my CSS:
/* 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: 14px;
cursor: default;
width: 760px;
white-space: nowrap;
/* 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;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
float: left;
width: auto;
white-space: nowrap;
padding-top: 0;
padding-right: 2;
padding-bottom: 0;
padding-left: 2;
/* 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
background: #FFF;
border: 1px solid #000000;
width: 210px;
/* 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;
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
color: #C40000;
/* 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
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%;
/* 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%;
Thanks so much! Ann

Hi,
Sorry because I can't understand very well English and
perhaps I will answer something that ... you know...
But I tried your code, all like you have on your web, but
adding the "BROWSER HACKS: the hacks below should not be changed
unless you are an expert", and it works on IE6, IE7, FF2. Yes,
without that, on IE6, the page breaks.
You only need to add the last fragment that I understand you
have deleted. It works without any other modification on css. You
can update your version 1.4 to 1.6 too.
I hope that I have understood all well.

Horizontal Spry submenus not dropping

I created a horizontal spry menu for this site just as I have always done. but the dropdown submenus are not working. I have tried commenting out other "functional" pieces of code. I even put a spry meny into a blank document and uploaded it. I cannot figure out what I've done wrong. Any help would be great.
You can see the page at http://www.rimshotcreative.com/test/web.html
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Rimshot Creative…Web Design, E-Commerce, Custom Web Development. Helping you find your groove.</title>
<link href="RC.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="wt-rotator.css"/>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
<style type="text/css">
h1,h2,h3,h4,h5,h6 {
          font-family: Verdana, Geneva, sans-serif;
h4 {
          font-size: 40px;
          color: #FFF;
body,td,th {
          font-family: Verdana, Geneva, sans-serif;
h1 {
          color: #C00;
body {
          background-image: url(Images/Secondary-backgrounds_01.jpg);
          background-repeat: repeat-x;
</style>
</head>
<body>
<div class="container2">
<div class="Shadow">
<div class="header"><a href="default.html"><img src="Images/RC-header_03.jpg" width="401" height="83" alt="Rimshot Creative Logo - web design, print design, social networking, marketing, seo, printing, & photography"></a><img src="Images/RC-header_04.jpg" width="291" height="83" alt="Rimshot Creative - "><img src="Images/RC-header_05.jpg" alt="Rimshot Creative - Free Consultation, call now (615) 482-5182" width="324" height="83"></div>
<div class="main-image">
     <img src="Images/Exceptional-Design.png" width="631" height="293" alt="Exeptional Web Design"> </div>
<div class="menu">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="default.html" title="Home Page">home</a>        </li>
      <li><a href="web.html" title="web services" class="MenuBarItemSubmenu">web services</a>
        <ul>
          <li><a href="web.html" title="web design services">web design</a></li>
          <li><a href="seo.html" title="search engine marketing">seo</a></li>
          <li><a href="social.html" title="social media consultation">social media</a></li>
          <li><a href="email.html" title="email marketing">email marketing</a></li>
          <li><a href="hosting.html" title="web/email hosting">hosting</a></li>
        </ul>
      </li>
      <li><a href="print.html" title="print design services" class="MenuBarItemSubmenu">print services</a>
        <ul>
          <li><a href="print.html" title="print design services">print design</a>            </li>
          <li><a href="printing.html" title="printing services">printing</a></li>
          <li><a href="marketing.html" title="marketing services">marketing</a></li>
        </ul>
      </li>
      <li><a href="photography.html" title="photography">photography</a></li>
      <li><a href="gallery.html" class="MenuBarItemSubmenu">galleries</a>
        <ul>
          <li><a href="web_gallery.html" title="See Some of the Web Sites We've Built">web gallery</a></li>
          <li><a href="print_gallery.html" title="See Some of Our Print Design Work">print gallery</a></li>
          <li><a href="photography_gallery.html" title="See Some of Our Photography">photo gallery</a></li>
        </ul>
      </li>
<li><a href="#" title="rimshot blog">blog</a></li>
<li><a href="resources.html" title="resources">resources</a></li>
<li><a href="testimonials.html" title="testimonials">testimonials</a></li>
    </ul>
</div>
    <div class="right_column">
      <p><a href="Contact Form.html"javascript:void( window.open('http://form.jotform.us/form/21766576593165', 'blank','scrollbars=yes,toolbar=no,width=700,height=500'))</a><img src="Images/Free-Consultation-Button.png" width="252" height="57" alt="Request a Free Consultation from Rimshot Creative"></a></a><a href="http://www.bnitennessee.com/tn-middle-tennessee-(nashville)-focused-around-business-succes s/"><img src="Images/proud-member-grey.jpg" width="131" height="131" alt="Proud Member of BNI Focused Around Business Success Chapter - Columbia TN"></a></p>
<p><a href="http://www.thumbtack.com/tn/brentwood/print-designers/#sort=popularity&hilite=3h88FmCa:V9o kA" title="Web & Print Design Services" style="background: url(http://cdn-1.thumbtackstatic.com/media/elite_1.png) no-repeat; color: #a5a196; padding: 195px 0 0; border:0; font-size: 13px; font-family: Georgia, 'Times New Roman', Times, serif; text-align: center; text-decoration: none; display: inline-block; width:120px; line-height:15px;"><img src="http://cdn-1.thumbtackstatic.com/media/elite_1.png" style="display: none;" />Web Design, Print Design, Photography, Brentwood, Columbia, Franklin, Spring Hill, TN</a><br />
      </p>
      <h2>Follow or Share…<br />
        <a href="http://www.facebook.com/pages/Rimshot-Creative/251035548260903" target="_new"><img src="Images/facebook button.png" width="32" height="32" alt="Follow Rimshot Creative on Facebook" longdesc="http://www.facebook.com/profile.php?id=100002963257842" /></a><a href="https://twitter.com/rimshotcreative" target="_new"><img src="Images/twitter button.png" width="32" height="32" alt="Follow Rimshot Creative on Twitter" longdesc="https://twitter.com/#!/belleforest" /></a><a href="http://www.linkedin.com/in/rimshotwebdesign" target="_new"><img src="Images/linkedin.png" width="32" height="32" alt="Join Rimshot Creative on Linked In"></a><a href="http://pinterest.com/rimshotcreative/" target="_new"><img src="Images/pinterest.png" width="32" height="32" alt="Start Pinning with Rimshot Creative on Pinterest"></a><a href="https://plus.google.com/101386322992063777741/posts" target="_new"><img src="Images/googleplus.png" width="32" height="32" alt="Join Rimshot Creative's circle on Google Plus"></a><a href="http://youtu.be/75_xggIkLyk?hd=1" target="_new"><img src="Images/YouTube button.png" width="32" height="32" alt="Check out Rimshot Creative videos on YouTube"></a>
        <p>
          <a href="https://plus.google.com/106267434027606674910/about?gl=US&hl=en-US" target="_new"><img src="Images/Google-Review-Button-No-Shadow.png" width="188" height="47" alt="Leave a review for Rimshot Creative on Google Places" /></a>
        <a href="http://local.yahoo.com/info-14947707"><img src="Images/Yahoo-Review-Button-No-Shadow.png" width="188" height="47" alt="Leave a review for Rimshot Creative on Yahoo Local" /></a></h2>
      <p>Rimshot Creative helps businesses find their groove through web design, print design, social networking, marketing, search engine optimization, printing, web and email hosting and photography in Nashville, Brentwood, Franklin, Thompsons Station, Spring Hill, Columbia, Mount Pleasant, Lewisberg, Hoenwald, Hampshire and all over Middle Tennessee.<br>
        <br>
      </p>
      <hr size="1">
      <p><strong><br>
        Rimshot Creative</strong><br>
      3313 Booker Farm Road<br>
      Mount Pleasant, TN 38474<br>
      Phone: (615) 482-5182<br>
      Fax:
      (615) 752-5956<br>
      <br>
      </p>
    </div>
    <div class="left_column">
      <h1> Get Your Groove On!</h1>
<p>Helping businesses find their groove is exactly what we try to do every day.</p>
      <h2>Layout</h2>
      <p>Since this is a one-column layout, the .content is not floated. </p>
      <h3>Logo Replacement</h3>
      <p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
      <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
      <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
    </div>
    <div class="footer">
      <p>Footer</p>
      </div>
      </div>
      
</div>
<div class="addthis_bar addthis_bar_vertical addthis_bar_medium" style="top:200px;left:25px;">
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
        <span><a class="addthis_button_preferred_1"></a></span>
        <span><a class="addthis_button_preferred_2"></a></span>
        <span><a class="addthis_button_preferred_3"></a></span>
        <span><a class="addthis_button_preferred_4"></a></span>
        <span><a class="addthis_button_compact"></a></span>
    </div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=[YOUR PROFILE ID HERE]"></script>

Thanks for your help.
It is not even on my local files. I would have thought that Dreamweaver would have created that in my local files. I can copy it over from one of my other sites.
1. Do you have any idea why it would not have been created?
2. What would be a way to resolve this if I didn't have this file on some of my other sites?
3. How did you determin that the file was not found on the server. I haven't seen any errors with any of the tools that I've used to analyse the site.

IE displays spry submenus (incorrectly) at top of screen

I apologize for asking this question, as it looks like it has been asked before, but I've spent hours trying to get my spry navigation bar to display correctly in Internet Explorer with no luck. My project for school is due tomorrow and this is the ONLY thing that is preventing me from completing my project. I'm practically in tears!
I use a horizontal spry menu and the submenus don't drop down like they are supposed to. They show up as separate navigation menus at the very top of the screen.
What additional information do I need to provide? My mentor was unable to help me because he uses a Mac and he can't test it.
http://katiemieher.tripod.com/aychihuahuarescue
Details below.
Thanks!!
Correct:
Messed up by Internet Explorer:
CSS:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    padding: 0;
    list-style-type: none;
    cursor: default;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    font-variant: small-caps;
    text-align: center;
    line-height: normal;
    white-space: normal;
    margin-top: 0;
    margin-right: 100;
    margin-bottom: 0;
    margin-left: 0;
/* 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: 120px;
    float: left;
    white-space: nowrap;
/* 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;
    float: right;
/* 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;
    width: auto;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 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: #F0F0F0;
    text-decoration: none;
    background-image: url(../images/navbar_01.gif);
    background-repeat: repeat-x;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
    background-image: url(../images/navbar_hover.gif);
    background-repeat: repeat-x;
/* 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: #FFF;
    background-image: url(../images/navbar_hover.gif);
    background-repeat: repeat-x;
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(../images/navbar_01.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
/* 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(../images/navbar_01.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
/* 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(../images/navbar_hover.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
/* 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(../images/navbar_hover.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
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;
    background-image: url(../images/navbar_01.gif);
    background-repeat: repeat-x;
/* 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-image: url(../images/navbar_01.gif);
    background-repeat: repeat-x;

Hi Katie,
I understand. Here is a revised style sheet. I cannot verify it because I do not have version 1.4 on my computer. Please try it, make sure you keep a copy of your own style sheet in case. After installation please give me your feedback.
@charset "UTF-8";
ul.MenuBarHorizontal
    padding: 0;
        margin: 0;
    list-style-type: none;
    cursor: default;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    font-variant: small-caps;
    text-align: center;
ul.MenuBarActive
    z-index: 1000;
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 120px;
    float: left;
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 120px;
    position: absolute;
    left: -1000em;
    float: right;
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
ul.MenuBarHorizontal ul li
    width: 120px;
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #F0F0F0;
    text-decoration: none;
    background-image: url(../images/navbar_01.gif);
    background-repeat: repeat-x;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
    background-image: url(../images/navbar_hover.gif);
    background-repeat: repeat-x;
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    color: #FFF;
    background-image: url(../images/navbar_hover.gif);
    background-repeat: repeat-x;
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(../images/navbar_01.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(../images/navbar_01.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(../images/navbar_hover.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(../images/navbar_hover.gif);
    background-repeat: repeat-x;
    background-position: 0% 0%;
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
        filter:alpha(opacity:0.1);
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background-image: url(../images/navbar_01.gif);
    background-repeat: repeat-x;
Ben

Spry submenus overlap menu in Internet Explorer

Hi, I'm working on a spry menu, and it looks exactly how i want it in Firefox, but in Explorer my submenus shift to the left and overlap my menu a lot.
Also on my horizontal menu, the whole menu shows up shifted to the left and to the top in Explorer
Here's the website
http://myareasbest.com/MI%20cities/Traverse-City.html
Heres my code for the vertical menu
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 12px;
    cursor: default;
    width: 12em;
    border: none;
/* 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
    list-style-type: none;
    font-size: 12px;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 12em;
    font-family: Verdana;
    font-style: normal;
    font-weight: bold;
    border: 2px solid #003399;
    height: 1.5em;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
/* 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: 12px;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 12em;
    left: -1000em;
    top: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 75px;
    font-family: Verdana;
    font-style: normal;
    font-weight: bold;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
    width: 12em;
    left: 75px;
    top: 5px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
    border: none;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
    border: none;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #01ACE2;
    color: #ffffff;
    text-decoration: none;
    height: 7px;
    width: 12em;
    padding-top: 0.5em;
    padding-right: 0;
    padding-bottom: 0.5em;
    padding-left: 0em;
    font-size: 100%;
/* 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: #003385;
    color: #FFF;
/* 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: #003385;
    color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
    position: absolute;
    z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
Code for horizontal menu
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, 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: 0px;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 160px;
    float: left;
    left: 200px;
    top: 0px;
    height: 30px;
/* 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: 160px;
    position: relative;
    left: -1000em;
        top: 0px;
/* 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: -200;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 10em;
/* 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: 0;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #01ACE2;
    padding: 0.5em 0.75em;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    border: 2px solid #003399;
/* 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: #003385;
    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: #003385;
    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-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;
/* 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;

Please address the following first http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmyareasbest.com%2FMI%2520cities%2 FTraverse-City.html

Spry Submenus Rolling Up in Multiple Broswers

Hi!
I'm trying to implement the spry menu on a website but it wont work for me. When you hover over the submenus they flicker and a submenu disappers. Here's a link to a page with this happening:
http://celebrationsphotography.us/contact_test.html
Thank you for your assistance!!!
hdksmith07

Please address the following first http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmyareasbest.com%2FMI%2520cities%2 FTraverse-City.html

Spry submenus disappear on hover with jquery in IE6 only

Help: I thought I had everything working perfectly until trying this site in IE6:
www.fstflorian.com/biolabs.html
Things work perfectly in firefox 3, 3.5, IE7, google chrome, and IE8. IE6 causes the menu to disappear on rollover. I've worked on this for probably 10 hours since discovering the problem, adjusting z-index, etc etc to no avail, so I thought I would ask the experts. The problem does not exist when jquery / supersized is not running. I also discovered that changing from absolute positioning in the standard spry IE hack area begins to change whether/not the submenus disappear but the menu arrangement turns into a huge mess.
I know my syntax isn't perfect... just trying to make things fully operational (site has gone live at least in limited function to meet deadline). Later I will look for help on cleaning things up a bit.
Thank you!

Moderators: Could you please remove this; it looks like I posted in the right place afterall. I don't see a way to delete.
Duplicate post is located here: http://forums.adobe.com/thread/516522?tstart=0
Very sorry for this.

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.

Spry Submenus won't appear on one page, but they will another

I have used Spry menu bars on sites before, but this is the
first time I have had a problem like this. I make the spry menu bar
on its own page and then use it as an include in a div tag on my
site. When I preview the Spry Menu Bar in its own page, it works
fine, and submenus work also. But when I have it in the page,
everything works except the submenus will not come out. Any ideas?
I attached the spry menu bar code (which works on its own), and my
own page, where the spry is not working.

Hi Rustyintegrale,
A couple of questions...
1. Does the unit immediately kernel panic when power from the bus hits the drive?
2. Does it happen in multiple users?
3. If you startup, interrupt the boot process and boot to the startup manager (by holding option on startup) and then plugin the SuperDrive does it kernel panic there as well?
When a peripheral causes a unit to go into this state, there's little that can be done to troubleshoot from a software perspective. Especially if your answer to all three questions above was "yes." You can certainly try resetting the PRAM & SMC, to see if there is any change. But, I think the next best step might be to bring the machine and this optical drive to see a qualified technician.

Spry Submenus Don't Disappear On Click

I am trying to use Spry menus, but the submenus do not
disappear on click. When a user selects a submenu item, the submenu
stays open even after the user has made a selection. The user has
to move the mouse away from the drop down menu in order for it to
disappear. This is clumsy.
What can I do to get around this? Any ideas?

If it was designed that way, I think it is a design flaw.
Once you click a selection on a submenu, you are done using
the submenu, and it should go away. That is how most desktop
software is designed.
I'm using items on the menu as links to another page that
appear in a DIV. The problem is, the submenu covers the top part of
the DIV, and the user cannot see if it worked or not.
How can we tell the Spry developers that submenus should
disappear on click to make them more user-friendly?

Spry Widget Horizontal Menu IE Issue

Hi,
I am new to spry widgets. I am building this site in dreamweaver and am using the spry widgetfor my nav bar.
The issue is, in Firefox the menu looks the way it is supposed to, but in IE it has a black box. I have tried a few things,
but no luck. I am sure this is simple but I couldnt figure it out.
http://prorecllc.com/home.html
Any help will be appreciated, thanks in advance.

I've been having problems with the horizontal menu in IE as
well. I have discovered that to center the main menu items without
having the submenu begin at the center of the parent item, put the
"text-align:center" under "ul.MenuBarHorizontal a" rather than the
"ul.MenuBarHorizontal li". I'm still working on making the submenu
items look nice - I don't like them centered but if they are
text-aligned left then they end up beginning far to the right of
the parent item (because the parent is centered with respect to
it's container).

Spry submenus horizontal

Similar Messages

Maybe you are looking for