Hi I need help with verticle spry menu bar drop down menu. When I test locally it's working fine but when I upload the drop down menu isn't working I've spent days to fix it but couldn't can anyone help me it's driving mad!!!!!
Thanks.
Hi Ken,
I hope this will help.
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.ALLCAPITAL { font: normal 14px/normal Tahoma, Geneva, sans-serif;
text-transform: uppercase;
color: #CCC;
font-weight: bold;
}
.ALLCAPITAL { color: #900;
}
.ALLCAPITAL { font-family: Arial, Helvetica, sans-serif;
}
.blue1 {color: #000;
font: normal 16px/normal Tahoma, Geneva, sans-serif;
}
.blue1 { color: #2E1502;
font-size: 14px;
font-style: italic;
}
.darkblue { color: #677E98;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
}
.john11white { color: #FFF;
font: normal 12px/normal Tahoma, Geneva, sans-serif;
text-transform: none;
}
.lightblue { color: #6D7E98;
}
.newrule { color: #84A1C2;
text-align: justify;
font: bold normal 16px/normal Tahoma, Geneva, sans-serif;
text-transform: none;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
}
body,td,th {
font: normal 12px Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
.Navbarbrown2012 { font-family: Tahoma, Geneva, sans-serif;
}
ul.MenuBarHorizontal { margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
.SIZE16 {
font-size: 16px;
}
.ALLCAPITAL .john11white .lightblue .john11white .john11white .john11white {
font: normal 10px/normal Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #677E9F;
}
/* 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: inherit;
cursor: pointer;
width: 14em;
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: 14em;
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: 170px;
text-align: left;
}
/* 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;
text-align: center;
}
/********************************************************************* **********
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: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-weight: normal;
text-align: inherit;
width: 14em;
}
/* 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: #CCC;
color: #FFF;
width: 14em;
text-align: inherit;
}
/* 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%;
width: 14em;
text-align: inherit;
}
/* 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);
}
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: inherit;
background: #FFF;
}
/* 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: #999;
color: #FFF;
width: 14em;
text-align: inherit;
}
.whiteletterenglish {
font: normal 14px/normal Arial, Helvetica, sans-serif;
color: #FFF;
}
.TAHOMANEW div {
font-weight: normal;
}
.CENTRE {
text-align: center;
}
.B { color: #09F;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size: 14px;
}
.BLACKFONT { font: bold normal 12px/normal Tahoma, Geneva, sans-serif;
text-transform: none;
color: #000;
font-weight: bold;
}
.BRIBOLD {color: #FFF;
font-family: Arial, Helvetica, sans-serif;
}
.Newwaybigletter { font: normal 18px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #677E98;
font-style: italic;
}
.TA2012 { font-family: Tahoma, Geneva, sans-serif;
color: #000;
font-weight: normal;
}
.TAHOMABROWN {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
.Titl4eabus24 {
font: bold 16px Tahoma, Geneva, sans-serif;
color: #677E98;
text-align: justify;
font-weight: normal;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
}
.bbstudy {
font-weight: normal;
font-family: Tahoma, Geneva, sans-serif;
color: #000;
font-size: 10px;
font-style: normal;
}
.bc { font-family: Tahoma, Geneva, sans-serif;
color: #000;
font-weight: normal;
}
.blackfont { color: #000;
font-size: 12px;
}
.blackfont2 {color: #000;
font-size: 12px;
}
.blue2 {color: #000;
font: normal 16px/normal Tahoma, Geneva, sans-serif;
}
.blue2 {color: #000;
font-size: 12px;
}
.bluenew2 { color: #3F75FF;
}
.bluenice {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
}
.brown { color: #06F;
font-size: 10px;
}
.churchaddresswhite { font: normal 12px/normal Tahoma, Geneva, sans-serif;
color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
}
.dccaddress201121111 {font: normal 12px Tahoma, Geneva, sans-serif;
color: #000;
}
.dccaddress201121111 {color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
}
.dccaddress2011212 {
color: #FFF;
font: normal 12px Tahoma, Geneva, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
}
.dccaddress20113 {color: #666;
font-family: Tahoma, Geneva, sans-serif;
}
.englishfontnew { color: #FFF;
font: bold 10px Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: normal;
font-family: Tahoma, Geneva, sans-serif;
}
.gray2 {color: #333;
}
.gray2 { color: #666;
font-weight: normal;
}
.gray2 {
font-family: Tahoma, Geneva, sans-serif;
font-style: normal;
}
.newenglishtext { font: bold normal 12px/normal Tahoma, Geneva, sans-serif;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}
.newindextitleseng1 {font: normal 14px Tahoma, Geneva, sans-serif;
text-transform: capitalize;
color: #FFF;
font-size: 12px;
}
.newindextitleseng1 {
color: #333;
font-family: Tahoma, Geneva, sans-serif;
}
.newtext1 { color: #FFF;
font: normal 14px Tahoma, Geneva, sans-serif;
font-size: 12px;
}
.nonboldariel1 {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-style: normal;
}
.nonboldariel2 {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-style: normal;
}
.orange { color: #FE9900;
font-weight: bold;
font-style: italic;
}
.red { color: #F00;
}
.s16 { font-size: 16px;
font-weight: normal;
color: #583F2C;
font-family: Tahoma, Geneva, sans-serif;
}
.sermtitle01-04-12 {
font-weight: normal;
font-size: 12px;
font-style: normal;
}
.t { font-family: Tahoma, Geneva, sans-serif;
color: #000;
font-weight: bold;
}
.tahoma21 {color: #CCC;
}
.whitetitle {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
font-size: 12px;
}
.whitetitle1 {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
font-style: normal;
}
.englishfont strong {
color: #FFF;
font-weight: normal;
}
.black {
font-style: normal;
}
.SIZE16 {
font-style: normal;
}
.Articles {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000;
}
.newtext11 {
color: #FFF;
font: normal 14px Tahoma, Geneva, sans-serif;
font-size: 12px;
}
.tahoma31 {text-align: justify;
}
.tahoma31 {font: normal 14px/normal Tahoma, Geneva, sans-serif;
color: #600;
font-family: Tahoma, Geneva, sans-serif;
}
.tahoma31 blockquote p {
font-size: 12px;
color: #333;
}
.blackfont1 {color: #000;
font-size: 12px;
}
.bluenice1 {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
}
.nonboldariel11 {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-style: normal;
}
.nonboldariel21 {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-style: normal;
}
.welcome14 { font-size: 14px;
text-align: center;
}
.whitetitle2 {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 12px;
}
.whitetitle11 {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
font-style: normal;
}
a:link {
text-decoration: none;
color: #333;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
}
.arielnew {
font-family: Arial, Helvetica, sans-serif;
}
I've spent days to fix it but couldn't can anyone help me it's driving mad!!!!!
When you uploaded page to server, did you include the SpryAssets folder with your Spry CSS & JavaScript files in it.?
Can you post the URL to your problem page so we can see it in our browsers?
Relevant link:
http://forums.adobe.com/message/4328118#4328118
Nancy O.
The markup for the menubar should be as
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Articles</a>
<ul>
<li><a href="importanofthechurch2012.html">Importance of the church</a></li>
<li><a href="ajourneytoeternityeng2012.html">A journey to eternity</a></li>
<li><a href="newbegnew2012.html">A new begenning with God</a></li>
<li><a href="dccdoctinalstatement2012.html">Dcc doctrinal statement</a></li>
<li><a href="thetimeisnear2012.html">The time is near</a></li>
<li><a href="Wearecalledtobeholy.html">We are called to be holy</a></li>
</ul>
</li>
<li><a href="sermon.html">Sermon</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Video</a>
<ul>
<li><a href="bstudynew2.html">From Genesis to Revelation</a></li>
<li><a href="topicalbseng2012new.html">Topical Bible Study</a></li>
<li><a href="songpage.html">Songs</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Other</a>
<ul>
<li><a href="#">Youths site</a></li>
<li><a href="#">Women site</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Contact us</a>
<ul>
<li><a href="#">Wembley</a></li>
<li><a href="#">Kingston</a></li>
<li><a href="#">Milton Keynes</a></li>
</ul>
</li>
</ul>
Gramps
Hi Gramps,
I need another help with verticle spry menu bar. When I test it on the browser so many gaps in the middle of every box. I pasted the code here below. Thanks.
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
1. Within the <head> element
Both of which target the same elements within the menubar markup.
2. The link to SpryMenuBarVertical.css comes after the style rules within the document, hence they override those in the document.
3. The linked CSS has had several absolute positioning's changed to relative. Why?
May I suggest that
1. you remove all document style rules that pertain to the menubar, leaving the external style sheet.
2. Resurrect the original external style sheet
Gramps
This will create a virgin copy of SpryMenuBarVertical in the SpryAssets folder.
Gramps
Your CSS is getting your browser's knickers all in a twist.
For example, you have all these ALLCAPITAL style rules conflicting, duplicating and placing same color text as background color which will cost you in Google rankings.
.ALLCAPITAL { font: normal 14px/normal Tahoma, Geneva, sans-serif;
text-transform: uppercase;
color: #CCC;
font-weight: bold;
}
.ALLCAPITAL { color: #900;
}
.ALLCAPITAL { font-family: Arial, Helvetica, sans-serif;
}.
ALLCAPITAL .john11white .lightblue .john11white .john11white .john11white {
font: normal 10px/normal Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #000;
font-size: 12px;
}
.ALLCAPITAL .darkblue {
color: #FDD7AF;
}
.ALLCAPITAL .darkblue {
color: #FC0;
}
.ALLCAPITAL .darkblue {
font-size: 16px;
}
.ALLCAPITAL .darkblue {
font-weight: bold;
}
.ALLCAPITAL .darkblue {
color: #999;
}
.ALLCAPITAL .darkblue {
color: #CCC;
}
.ALLCAPITAL .darkblue {
color: #000;
}
.ALLCAPITAL .darkblue {
font-size: 14px;
As well as these 14 more errors shown here:
North America
Europe, Middle East and Africa
Asia Pacific