Drop down menu bug
Hi, I am using a drop down menu that I built based upon a
tute very similar to the kirupa one.
My problem is that because my menu items are positioned just
1px apart, sometimes the submenus do not close if you move the
mouse quickly to a menu item above it. It works fine however when
moving the mouse quickly to the menu item below.
My menu is vertical and has the submenu items come out to the
side. They are all spaced 1px apart, however if you move the mouse
too quickly between main menu items, the previous sub menu stays
open (as the mouse hasnt rolled over the invisible rolloff area).
Is there a way to get around this if you have your menu's
close together? Having them spaced by 10pixels simply just isnt
good enough.
Heres a link to my website to show you whats going on with
the menu:
http://www.3amdesign.com.au/lumo/new-website8/
anyone able to help me with this? im really stuck!
Similar Messages
-
Hello,
I can't seem to open additional tabs with the +, the drop down menu, or Command T? Is this a bug, or am I missing something?
I'm running Firefox 30.0 in OS 10.8.5 on a Mac Book Pro with the 2.7 GHz Intel Core i7 and 8GB 1333 MHz DDR3 memory.
Thanks in advance,
PatBOOM! You have hit the nail on the head, sir!
I disabled my Vuze Remote Community Toolbar and the problem was fixed.
Thank you, the-edmeister!!!! -
Problem with checkbox and drop down menu
I am using DW8 with PHP/MySQL.
I made a insertion form and a couple of the fields are
checkboxes and another is a drop down menu. Everything works fine,
however, when I create an update form and the recordset calls the
data it doesn't retain its values on those items.
For example, if I checked a box when inserting the record and
then call the data up for the update form, the box is not checked,
making the user believe it was never checked in the first place.
The same thing goes for the drop down menu. If I have 3
options in the menu and someone selects the third one, when the
update form is used it defaults to the first option automatically
instead of actually calling up the original value selected.The fact that two scripts do not work together does not mean
there is a bug in the RH script. It is simply that they were not
designed by their respective developers to work together. This
happens with multiple scripts in any html file.
Try creating a new project and then importing just this topic
into it. Does it still have the problem? -
This happens when I start Firefox (v. 3.6.28) from desktop. I ussually start it from quick launch. I have a star shaped button, top left, that works like a drop-down menu for my bookmarks. But now there's only a small window there, and the bookmarks do not appear anymore. They are stored in the Bookmarks>>Unsorted bookmarks tab. But how the hell do I get them to the drop menu ?
Did I mention that Restore doesn't ....... do anything ?
Also I haven't changed any settings in the last 2 weeks.
''Edited by a moderator due to language. See the [http://support.mozilla.com/kb/Forum+and+chat+rules+and+guidelines Rules & Guidelines] .''Staying with Firefox 3.6 is both EXTREMELY Insecure (you are vulnerable to almost every hole on [https://www.mozilla.org/security/known-vulnerabilities/firefox.html https://www.mozilla.org/security/known-vulnerabilities/firefox.html] since Firefox 12), and you are using a version that is significantly slower, doesn't support modern web technology, and has known bugs (crashes, freezes, etc.). If it's just the UI you don't like, you can quickly and easily change the UI to look exactly like 3.6.
So, until you update you are knowingly using an old version of software with dozens of known bugs. -
Spry Drop Down menu issue in IE
I created a menu bar with Spry and it works fine in Firefox
but playing up in IE. The drop down menu starts displaying from the
top of the page and not where the menu bar is. I have never come
across this issue with Spry and cannot figure out whats wrong. the
page is www.cerdomustile.com.au/new if you want to have a look. the
Spry code is:
@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: 11px;
cursor: default;
width: 500px;
background-color: #000000;
font-weight: normal;
font-family: "Trebuchet MS";
height: 18px;
/* 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: 11px;
position: relative;
text-align: left;
cursor: default;
width: 100px;
float: left;
background-color: #000000;
font-weight: normal;
font-family: "Trebuchet MS";
height: 18px;
/* 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:100px;
position: absolute;
left: -1000em;
height: 18px;
/* 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;
height: 18px;
position:absolute
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 100px;
/* 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: #000000;
padding: 0.5em 0.75em;
color: #FFFFFF;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #000000;
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: #000000;
color: #625647;
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%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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-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;
}No one has any ideas? Someone had mentioned to me that it was
some hybrid code that would have to be inserted to make IE read
differently that Safari, Firefox. Not sure how to go about finding
the code I'd need, though.
Thanks in advance,
Burt -
Error due to drop down menu in the dataTable
I have a data table which has a drop down menu in one of the table columns. When the drop down menu is disabled, every action in the page works (click on it, and it does what it does). When the drop down menu is enabled, every action (with one exception) in the page does not work (click on it, it refreshes the page, but the action is not fired). I cannot debug the thing because the action is not fired at all.
The exception is that for buttons that is marked as immediate, it works. I created an inline message, and wire that to the dropdown menu. I do not see any error. Looking into the log file, I do not see anything.
I was suspecting maybe conversion error. The data value for the drop down menu is integer (I try both setting the convert to integer and nothing). Even there's error in conversion, there should be error message showing up (in the inline message box).
So, again, how do I diagnos this, and to find out what is going on?
Thank you very much.
Vh.Thank you for your attention.
The bug link is:
https://javaserverfaces.dev.java.net/issues/show_bug.cgi?id=51
I thought I could add attachment afterward, but I couldn't. Please add these for me:
//////////////////////////////////////////////////// Page3.jsp //////////////////////////////////////////////////////////////////
<?xml version="1.0" encoding="UTF-8"?>
<jsp:root version="1.2" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page">
<jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
<f:view>
<html lang="en-US" xml:lang="en-US">
<head>
<meta content="no-cache" http-equiv="Cache-Control"/>
<meta content="no-cache" http-equiv="Pragma"/>
<title>Page3 Title</title>
<link href="resources/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body style="-rave-layout: grid">
<h:form binding="#{Page3.form1}" id="form1">
<h:dataTable binding="#{Page3.dataTable1}" headerClass="list-header" id="dataTable1" rowClasses="list-row-even,list-row-odd"
style="height: 111px; left: 60px; top: 120px; position: absolute" value="#{Page3.dataTable1Model}" var="currentRow" width="360">
<h:column binding="#{Page3.column1}" id="column1">
<h:outputText binding="#{Page3.outputText1}" id="outputText1" value="#{currentRow.c1}"/>
<f:facet name="header">
<h:outputText binding="#{Page3.outputText2}" id="outputText2" value="column1"/>
</f:facet>
</h:column>
<h:column binding="#{Page3.column2}" id="column2">
<h:outputText binding="#{Page3.outputText3}" id="outputText3" value="#{currentRow.c2}"/>
<f:facet name="header">
<h:outputText binding="#{Page3.outputText4}" id="outputText4" value="column2"/>
</f:facet>
</h:column>
<h:column binding="#{Page3.column3}" id="column3">
<f:facet name="header">
<h:outputText binding="#{Page3.outputText6}" id="outputText6" value="column3"/>
</f:facet>
<h:selectOneMenu binding="#{Page3.dropdown1}" converter="#{Page3.integerConverter1}" id="dropdown1" value="#{currentRow.c3}">
<f:selectItems binding="#{Page3.dropdown1SelectItems}" id="dropdown1SelectItems" value="#{Page3.dropdown1DefaultItems}" />
</h:selectOneMenu>
</h:column>
</h:dataTable>
<h:outputText binding="#{Page3.outputMesg}" id="outputMesg" style="height: 32px; left: 240px; top: 50px; position: absolute; width: 180px"/>
<h:outputText binding="#{Page3.outputText8}" id="outputText8" style="height: 30px; left: 60px; top: 50px; position: absolute; width: 162px" value="Message:"/>
<h:commandButton action="#{Page3.button1_action}" binding="#{Page3.button1}" id="button1"
style="height: 25px; left: 300px; top: 260px; position: absolute; width: 109px" value="Say Hello"/>
<h:message binding="#{Page3.inlineMessage1}" errorClass="errorMessage" fatalClass="fatalMessage" for="dropdown1" id="inlineMessage1"
infoClass="infoMessage" showDetail="false" showSummary="true"
style="height: 102px; left: 60px; top: 300px; position: absolute; width: 360px" warnClass="warnMessage"/>
<h:outputText binding="#{Page3.outputText5}" id="outputText5" style="height: 30px; left: 60px; top: 260px; position: absolute; width: 120px" value="Error Message:"/>
</h:form>
</body>
</html>
</f:view>
</jsp:root>//////////////////////////////////////////////////// Page3.java //////////////////////////////////////////////////////////////////
* Page3.java
* Created on August 10, 2004, 10:35 AM
* Copyright hovh
package webapplication1;
import javax.faces.*;
import com.sun.jsfcl.app.*;
import javax.faces.component.html.*;
import com.sun.jsfcl.data.*;
import java.util.*;
import javax.faces.component.*;
import javax.faces.convert.*;
public class Page3 extends AbstractPageBean {
// <editor-fold defaultstate="collapsed" desc="Creator-managed Component Definition">
private int __placeholder;
private HtmlForm form1 = new HtmlForm();
public HtmlForm getForm1() {
return form1;
public void setForm1(HtmlForm hf) {
this.form1 = hf;
private HtmlDataTable dataTable1 = new HtmlDataTable();
public HtmlDataTable getDataTable1() {
return dataTable1;
public void setDataTable1(HtmlDataTable hdt) {
this.dataTable1 = hdt;
private DefaultTableDataModel dataTable1Model = new DefaultTableDataModel();
public DefaultTableDataModel getDataTable1Model() {
return dataTable1Model;
public void setDataTable1Model(DefaultTableDataModel dtdm) {
this.dataTable1Model = dtdm;
private UIColumn column1 = new UIColumn();
public UIColumn getColumn1() {
return column1;
public void setColumn1(UIColumn uic) {
this.column1 = uic;
private HtmlOutputText outputText1 = new HtmlOutputText();
public HtmlOutputText getOutputText1() {
return outputText1;
public void setOutputText1(HtmlOutputText hot) {
this.outputText1 = hot;
private HtmlOutputText outputText2 = new HtmlOutputText();
public HtmlOutputText getOutputText2() {
return outputText2;
public void setOutputText2(HtmlOutputText hot) {
this.outputText2 = hot;
private UIColumn column2 = new UIColumn();
public UIColumn getColumn2() {
return column2;
public void setColumn2(UIColumn uic) {
this.column2 = uic;
private HtmlOutputText outputText3 = new HtmlOutputText();
public HtmlOutputText getOutputText3() {
return outputText3;
public void setOutputText3(HtmlOutputText hot) {
this.outputText3 = hot;
private HtmlOutputText outputText4 = new HtmlOutputText();
public HtmlOutputText getOutputText4() {
return outputText4;
public void setOutputText4(HtmlOutputText hot) {
this.outputText4 = hot;
private UIColumn column3 = new UIColumn();
public UIColumn getColumn3() {
return column3;
public void setColumn3(UIColumn uic) {
this.column3 = uic;
private HtmlOutputText outputText6 = new HtmlOutputText();
public HtmlOutputText getOutputText6() {
return outputText6;
public void setOutputText6(HtmlOutputText hot) {
this.outputText6 = hot;
private HtmlOutputText outputMesg = new HtmlOutputText();
public HtmlOutputText getOutputMesg() {
return outputMesg;
public void setOutputMesg(HtmlOutputText hot) {
this.outputMesg = hot;
private HtmlOutputText outputText8 = new HtmlOutputText();
public HtmlOutputText getOutputText8() {
return outputText8;
public void setOutputText8(HtmlOutputText hot) {
this.outputText8 = hot;
private HtmlCommandButton button1 = new HtmlCommandButton();
* Holds value of property tableData.
private ArrayList tableData;
public HtmlCommandButton getButton1() {
return button1;
public void setButton1(HtmlCommandButton hcb) {
this.button1 = hcb;
private HtmlSelectOneMenu dropdown1 = new HtmlSelectOneMenu();
public HtmlSelectOneMenu getDropdown1() {
return dropdown1;
public void setDropdown1(HtmlSelectOneMenu hsom) {
this.dropdown1 = hsom;
private DefaultSelectItemsArray dropdown1DefaultItems = new DefaultSelectItemsArray();
public DefaultSelectItemsArray getDropdown1DefaultItems() {
return dropdown1DefaultItems;
public void setDropdown1DefaultItems(DefaultSelectItemsArray dsia) {
this.dropdown1DefaultItems = dsia;
private UISelectItems dropdown1SelectItems = new UISelectItems();
public UISelectItems getDropdown1SelectItems() {
return dropdown1SelectItems;
public void setDropdown1SelectItems(UISelectItems uisi) {
this.dropdown1SelectItems = uisi;
private IntegerConverter integerConverter1 = new IntegerConverter();
public IntegerConverter getIntegerConverter1() {
return integerConverter1;
public void setIntegerConverter1(IntegerConverter ic) {
this.integerConverter1 = ic;
private HtmlMessage inlineMessage1 = new HtmlMessage();
public HtmlMessage getInlineMessage1() {
return inlineMessage1;
public void setInlineMessage1(HtmlMessage hm) {
this.inlineMessage1 = hm;
private HtmlOutputText outputText5 = new HtmlOutputText();
public HtmlOutputText getOutputText5() {
return outputText5;
public void setOutputText5(HtmlOutputText hot) {
this.outputText5 = hot;
// </editor-fold>
public Page3() {
// <editor-fold defaultstate="collapsed" desc="Creator-managed Component Initialization">
try {
dropdown1DefaultItems.setItems(new String[] {"1", "2", "3"});
} catch (Exception e) {
log("Page3 Initialization Failure", e);
throw e instanceof javax.faces.FacesException ? (FacesException) e : new FacesException(e);
// </editor-fold>
// Additional user provided initialization code
tableData = new ArrayList();
tableData.add(new webapplication1.TableEntry("c1_1", "c2_1", 1));
tableData.add(new webapplication1.TableEntry("c1_2", "c2_2", 2));
tableData.add(new webapplication1.TableEntry("c1_3", "c2_3", 3));
this.dataTable1Model.setWrappedData(tableData);
protected webapplication1.ApplicationBean1 getApplicationBean1() {
return (webapplication1.ApplicationBean1)getBean("ApplicationBean1");
protected webapplication1.SessionBean1 getSessionBean1() {
return (webapplication1.SessionBean1)getBean("SessionBean1");
* Bean cleanup.
protected void afterRenderResponse() {
* Getter for property tableData.
* @return Value of property tableData.
public ArrayList getTableData() {
return this.tableData;
* Setter for property tableData.
* @param tableData New value of property tableData.
public void setTableData(ArrayList tableData) {
this.tableData = tableData;
public String button1_action() {
// User event code here...
this.outputMesg.setValue("Hello world!");
return null;
}//////////////////////////////////////////////////// TableEntry.java //////////////////////////////////////////////////////////////////
* TableEntry.java
* Created on September 3, 2004, 2:38 PM
package webapplication1;
* @author hovh
public class TableEntry {
String c1;
String c2;
int c3;
String c3Str;
public TableEntry(String c1, String c2, int c3){
this.c1 = c1;
this.c2 = c2;
this.c3 = c3;
public String getC1() {
return c1;
public void setC1(String c1) {
this.c1 = c1;
public int getC3() {
return c3;
public void setC3(int c3) {
this.c3 = c3;
public String getC2() {
return c2;
public void setC2(String c2) {
this.c2 = c2;
public java.lang.String getC3Str() {
return "" + c3;
public void setC3Str(java.lang.String c3Str) {
this.c3Str = c3Str;
try{
c3 = Integer.parseInt(c3Str);
}catch(Exception e){ -
Drop Down Menu with images in Muse and Animate
Hello,
i am trying to create a drop down menu with images as you can see on this website:
http://www.kadewe.de/
In Adobe Muse the menu with all pages in it doesn't let me insert pictures.
With the empty composition widget i archived something similar but when once activated the action it doesn't close.
My last try was to build a menu in Edge Animate. The Problem i had was that when i used the action click, open URL.
Inserted in Muse the new page opens in the created animation and not on the same page fullscreen.
What have i done wrong?
Thank you for your answers.I am having a similar problem. I have multiple widgets on a page -- menus, accordions, tooltips, slideshows. As soon as I 'activate' a widget (eg: expand an accordion or play a slideshow) it disables all the triggers below it, as well as all the hyperlinks. This seems like a bug... I hope there's a workaround?
-
Drop Down Menu going up in IE 8- HELP!
I'm new to using the spry widgets in CS3 Dreamweaver, and I'm trying to create my first horizontal menu where one of the items will have a drop down menu. It works in all browsers except for IE8, where it starts at the top of the page and goes down. I've tried adjusting the css for this in a few different ways based on some of the forums I've read, but I still can't get it to work. Could someone look at the css code (below), and let me know how to fix this. Any assistance or advice would be greatly appreciated. Thanks Much!!!
@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: 150;
list-style-type: none;
font-size: medium;
cursor: default;
width: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
top: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: 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: 8em;
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;
top:0;
/* 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-top: 0%;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 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: #000000;
padding: 0.5em 0.75em;
color: #FFFFFF;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #C41E3A;
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: #C41E3A;
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;Remove the red coloured part
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
left: auto;
top:0;
or start again with the original SpryMenuBarHorizontal.css and follow the rules as in http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one.
Either way will get you back on track.
Good luck.
Ben -
DW CS4 Horizontal Spry drop down menu not displaying correctly in Internet Explorer 8
Hi,
I have created a horizontal Spry drop down menu in Dreamweaver CS4 with my own background images. I have done various modifications to the CSS script to accommodate the style and feel needed; including making the main buttons' height twice the size of the sub menu buttons and some alignments. It seems to work different depending which browser is used.
It works well in Google Chrome.
It works well in Firefox with the exception that if any of the buttons are clicked, thereafter a thin black line is diplayed horizontally across center of the top main buttons when the mouse rolls over them. I would like to correct this but is not nearly as bad as the problem I'm having in Internet Explorer 8.
Here is my biggest concern and I would greatly appreciate if anyone can shed some light on this matter.
Once opened in Internet Explorer 8 the main navigation buttons appear as they should. IE8 prompts me the following: "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options..". Once I allow IE8 to run scripts or ActiveX controls, the background image disappears and only shows on any menu or submenu button when the mouse rolls over that particular button. Can someone please help.
The menu can be seen at work by clicking on this link:
www.bargainxchange.com/BXC Main Navigation Spry Drop Menu.html
Below are all the scrips involved.
Here is the CSS script named "SpryMenuBarHorizontal4.css" in use :
/* 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: 10;
padding: 0;
list-style-type: none;
font-size: 80%;
cursor: default;
width: auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
/*whole menu moves*/
margin-left: 100px;
/* 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;
/* My Note --Top buttons' background, height and font size adjust-- */
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
/* My note --I added the height and background-image as Main-Buttons.jpg-- */
height: 55px;
background-image: url(../Main-Buttons.jpg);
margin: -2;
padding: 0;
list-style-type: none;
font-size: 100%;
position: center;
/*text-align: left;*/
cursor: pointer;
width: 99px;
float: left;
/* My note --Submenu font size adjust-- */
/* 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
/*height:38px;*/
margin: 0;
padding: 0;
list-style-type: none;
font-size: 87%;
z-index: 1020;
cursor: default;
width: 160px;
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
/* My note --this margin alligns the drop buttons up and down-- */
margin-top: 24px;
height: 25px;
left: auto;
/* My note --drop menu size adjustments-- */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
height: 25px;
width: 160px;
/* 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;*/
/* My note --Text Allignment global-- */
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
/*height: 40px;*/
text-align: center;
/*vertical-align: center;*/
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
/*zzzzzzzz Text Color*/
color: #333; /*background-color: #CCC;*/
letter-spacing: -0.00px;
margin-left: 1px;
margin-right: 0px;
/*alligns text up or down globally*/
margin-top: 1px;
/* 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-image: url(../Main-Buttons-mouse-over.jpg); /*background-color: #33C;
color: #FFF;*/
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-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%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
background-position: 95% 50%;
/* My note --mouse over-- */
/* 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-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;
Here is the JavaScrip file named "SpryMenuBar.js" that has not been modified in any way:
// SpryMenuBar.js - version 0.12 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
if (typeof this[k] == 'undefined')
var rollover = new Image;
rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1';
this.initialize(items[i], element);
if(Spry.is.ie)
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
if (this.enableKeyboardNavigation)
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
if(this.hasClassName(this.element, this.verticalClass))
this.element.style.position = "relative";
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
// this refers to the list item
if(testNode == null)
return false;
if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
var tmp = el;
while (tmp != this.element)
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
found = this.getElementForKey(opts, 'y', 1);
break;
case this.downKeyCode:
found = this.getElementForKey(opts, 'y', -1);
break;
case this.leftKeyCode:
found = this.getElementForKey(opts, 'x', 1);
break;
case this.rightKeyCode:
found = this.getElementForKey(opts, 'x', -1);
break;
case this.escKeyCode:
case 9:
this.clearSelection();
this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
//subopts
this.mouseOver(listitem, e);
break;
case 2:
//parent
this.mouseOut(opts[2], e);
break;
case 3:
case 4:
// left - right
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
//stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
var self = this;
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
continue;
if (els[i])
var tmp = rect(els[i]);
if ( (dir * tmp[prop]) < (dir * ref[prop]))
ref = tmp;
found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
if(isFirstEntry)
camelizedString = oStringList[i];
isFirstEntry = false;
else
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
else if (element.currentStyle)
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
And last, here is the HTML code that has also not been modified in any way:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../BXC Main Navigation Spry Drop Menu/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Buy</a>
<ul>
<li><a href="#">Shop from Private Owner</a></li>
<li><a href="#">Shop Direct from Stores</a></li>
<li><a href="#">Help Buying</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Bid</a>
<ul>
<li><a href="#">Shop from Auction</a></li>
<li><a href="#">Help Bidding</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Trade</a>
<ul>
<li><a href="#">Shop for Trades</a></li>
<li><a href="#">Help Trading</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">List Items</a>
<ul>
<li><a href="#">List Items in Auction</a></li>
<li><a href="#">List Items for Sale</a></li>
<li><a href="#">List Items for Trade</a></li>
<li><a href="#">Help Listing Items</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Intro</a>
<ul>
<li><a href="#">Flash Site &amp; Intro</a></li>
<li><a href="#">About Us</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">My Xchange</a>
<ul>
<li><a href="#">Activity</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Mail</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Help</a>
<ul>
<li><a href="#">Main Help</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
Thanks in advance for any of your help.
Jose H.Hello Nancy,
I was troubleshooting For the next 8 hours after my post here and eventually I got it right, I uploaded the files to the test server and at the time did not have the chance to post the solution here. This is why, as you saw, it is working correctly now. Both the CSS and HTML files needed modifications. While working on the code I had to run IE8, Chrome and Firefox simultaneously and refresh all three after every change in the code because what would fix the problem in one would cause a problem for the other.
In addition to the problems listed in my original post, there were also other graphical issues in IE8, such as; the main menu buttons without sub-menus would only display at half their size vertically. The border around the buttons would not display despite that the background images were rendered in Photoshop as flattened JPEGs with boarders as part of the background image. Being so, I removed all borders from the CSS script.
By the way.. the IE8 security measure did pop up while working from the server.
Anyhow for those of you who are experiencing similar problems you can take a look at the working code bellow and compare it to the initial code. I've included detail comments on every line I have changed, modified or added.
Good luck.. as I know it can become a complicated task when creating custom Spry menus.
<b>Here is the finished CSS script</b>
<code>@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: 10;
padding: 0;
list-style-type: none;
/* font size for top menu*/
font-size: 80%;
cursor: default;
width: auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
/*whole menu moves*/
margin-left: 100px;
/* 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;
/* My Note --Top buttons' background, height and font size adjust-- */
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
/* My note --I added the height and background-image as Main-Buttons.jpg-- */
height: 55px;
background-image: url(../Main-Buttons.jpg);
margin: -2;
padding: 0;
list-style-type: none;
font-size: 100%;
position: center;
/*text-align: left;*/
cursor: pointer;
width: 99px;
float: left;
/* My note --Submenu font size adjust-- */
/* 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: 87%;
z-index: 1020;
cursor: default;
width: 160px;
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
/* My note --this margin alligns the drop buttons up and down-- */
margin-top: 0px;
height: 25px;
left: auto;
/* My note --drop menu size adjustments-- */
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
height: 25px;
width: 162px;
/* New addition */
/* 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;*/
/* My note --Text Allignment global-- */
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
/*My note -- took out borders & changed text color to #333(black)& added my own mouse not over image-- */
/*border: 0px solid #333332;*/
background-image: url(../Main-Buttons.jpg);
/*height: 40px;*/
text-align: center;
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
/*My note --Text Color-- */
color: #333; /*background-color: was #CCC;*/
letter-spacing: -0.00px;
margin-left: 1px;
margin-right: 0px;
/*alligns text up or down globally*/
margin-top: 1px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
/* My note --took out all backgound & text color for mouse over-- */
/*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
/*My note -- took out background & text & added my own mouse over image-- */
background-image: url(../Main-Buttons-mouse-over.jpg);
/*background-color: #33C;
color: #FFF;*/
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
/* My note --!!!!!This height setting adjusts the main buttons' background height in IE8!!!!-- */
height: 40px;
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%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
background-position: 95% 50%;
/* My note --mouse over-- */
/* 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-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;
/* My note --The backgound color below was changed here to the same color #3e6487 as the darkest tone in the background image graphic to mimic the original image borders; dark blue, since IE8 for some reason would cut them out. This change allows this dark blue background to display around the main top buttons in IE8 giving the appearance of borders*/
background: #3e6487;
</code>
<b>Here is the modified HTML script</b>
<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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryMenuBarHorizontal4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Buy</a>
<ul>
<li><a href="#">Shop from Private Owner</a></li>
<li><a href="#">Shop Direct from Stores</a></li>
<li><a href="#">Help Buying</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Bid</a>
<ul>
<li><a href="#">Shop from Auction</a></li>
<li><a href="#">Help Bidding</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Trade</a>
<ul>
<li><a href="#">Shop for Trades</a></li>
<li><a href="#">Help Trading</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">List Items</a>
<ul>
<li><a href="#">List Items in Auction</a></li>
<li><a href="#">List Items for Sale</a></li>
<li><a href="#">List Items for Trade</a></li>
<li><a href="#">Help Listing Items</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Intro</a>
<ul>
<li><a href="#">Flash Site &amp; Intro</a></li>
<li><a href="#">About Us</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">My Xchange</a>
<ul>
<li><a href="#">Activity</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Mail</a></li>
</ul>
</li>
<!-- My note --the bellow line was: <li><a href="#">Contact Us</a></li> --- changing it to: <li><a href="#" class="MenuBarItemSubmenu">Contact Us</a> corrected the height of the Contact us button wich did not have sub menus and because of this only diplayed at half size vertically in IE8 //-->
<li><a href="#" class="MenuBarItemSubmenu">Contact Us</a>
<li><a href="#" class="MenuBarItemSubmenu">Help</a>
<ul>
<li><a href="#">Main Help</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
</code>
And Richard.. Thanks again for the time and your help, truly appreciated.
Jose H. -
Drop-down menu in Dreamweaver CS5.5 not displaying
Thanks for anyone's help. I'm a first time user of the forum so please excuse any protocol errors.
I can't get my drop-down menu to display on my web page (http://www.cglcontracting.com/) on a Windows platform using Dreamweaver CS5.5.
Thanks very much for any advice/help.Hi again -
My previous suggestion did not seem to make any difference, the CSS still did not validate.
I seems to be choking on your Browser Hack section.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.cglcontracting.com%2FSpr yAssets%2FSpryMenuBarHorizontal.css&profile=css3&usermedium=all&warning=1&vextwarning=&lan g=en
I re-wrote the bottom Browser Hack section and it now validates.
I'll paste the whole CSS file here, Save it as "SpryMenuBarHorizontal.css" and give it a try.
@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: 90%;
cursor: default;
width: auto;
color: rgb(153,153,153);
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
background-color: rgb(255,255,255);
vertical-align: middle;
/* 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
color: rgb(153,153,153);
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;
color: rgb(0,255,0);
overflow: hidden;
visibility: inherit;
/* 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
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
color: rgb(204,204,204);
top: 0px;
overflow: auto;
visibility: inherit;
margin-top: -5%;
margin-left: 95%;
/* 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
color: rgb(204,204,204);
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-variant: small-caps;
text-transform: uppercase;
background-color: rgb(255,0,0);
left: auto;
width: auto;
z-index: auto;
visibility: inherit;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
text-align: left;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
background-color: rgb(204,204,204);
margin-top: -5%;
margin-right: 0;
margin-bottom: 0;
margin-left: 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: 100px;
background-color: rgb(204,204,204);
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 0px none #CCC;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0%;
margin-left: 0%;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #F00;
color: #003;
text-decoration: none;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
padding-top: 1.2ex;
font-weight: bold;
vertical-align: middle;
padding-bottom: 0.53em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #000;
color: rgb(255,255,255);
text-align: center;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #900;
color: #066;
text-align: center;
vertical-align: middle;
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: 98% 50%;
background-color: rgb(255,0,0);
color: rgb(0,0,51);
/* 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: 98% 50%;
background-color: rgb(204,204,204);
visibility: 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 a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 98% 50%;
background-color: rgb(153,0,0);
visibility: visible;
/* 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: 98% 50%;
background-color: rgb(153,153,153);
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; -
When searching for a song title, an artist etc in Itunes 12 it shows the results via a tiny consolidated drop down menu, however in previous version of Itunes search results would be displayed in the main playlist view. I seriously dislike the search drop down view because A) it only shows limited results B) It shows artwork C) It is confusing when trying to search your playlist when you are trying to organize your library.
If anyone knows a way to change the search view preference please let me know how or advise me on how to suggest to Apple that they change it back or give people the option to choose which search result view they would like to use.
Thanks.If you disable the Search Entire Library option (available in the dropdown to the left of the search box) iTunes 12 will not show the search results in a dropdown but will immediately go to a filtered version of your current view. With the Search Entire Library option enabled, you can still get to this filtered view by clicking on the first entry in the drop down, which will say "Show <search string> in Library" or "Show <search string> in <playlist>" depending on where you start the search from.
There are some inconsistencies in the search behavior, most notably that where you have the Search Entire Library option enabled and search within a playlist the dropdown will show all matches in you complete library (whether in your playlist or not), whereas the first entry in the dropdown just takes you to the filtered playlist view.
You can use https://www.apple.com/feedback/itunesapp.html to provide input to developers about bugs, enhancement requests, etc. -
This add-on extension "Disconnect", after upgrading to Firefox 29 now displays only a tiny drop down box when clicked vs the full drop down menu. Before the upgrade it worked fine. It does this whether adding it to the tool icons in the upper right of the window (left of the new Firefox dropdown menu) or whether adding it to the Firefox menu itself as an additional icon. The extension appears to work in terms of blocking adds/tracking, as before, just can't see what is in the drop down menu. Already tried disabling and re-enabling, no change.
hello pkoof, please directly contact the extension developers through the means provided at the [https://addons.mozilla.org/firefox/addon/disconnect homepage] - they can likely give you more detailed guidance and are the only ones who can fix bugs or make necessary adjustments in the addon for new firefox versions. thank you...
-
I have a small problem, don't know if you can help at all. I have have upgraded to the latest version of spry and created my spry menu in Dreamweaver CS3. It works great in firefox, but in IE7 the drop down menu jumps up to the top of the browser window, instead of below the menu bar.
When I check using the browser compatibility function in CS3, I get a message "Expanding Box Problem" with the following lines of code highlighted:
<ul>
<li><a href="testimonials extra.html">Extra</a></li>
<li><a href="testimonials defender.html">Defender II</a></li>
</ul>
Here is link to the site, so you can take a look
http://www.efptproducts.com/
Any ideas or help would be greatly appreciated ?
regards,
BillHi again,
Not sure if you need it, but following is the spry css file code:
@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
/* 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;
height: 33px;
font-family: Trebuchet, "Trebuchet MS", sans-serif;
color: #FFFF00;
font-weight: bold;
/* Menu item containers, position children relative to this container and
are a fixed width */
ul.MenuBarHorizontal li
/* 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
/* 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
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
/* Submenus should appear slightly overlapping to the right (95%) and up
(-5%) */
ul.MenuBarHorizontal ul ul
/* 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
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
/* Menu items that have mouse over or focus have a blue background and white
text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
/* 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: #333333;
font-family: Trebuchet, "Trebuchet MS", sans-serif;
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/MB%20Dark%20Thin.jpg);
background-repeat: repeat-x;
background-position: 95% 50%;
font-family: Trebuchet, "Trebuchet MS", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFFF00;
/* 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/MB%20Light%20Thin.jpg);
background-repeat: repeat-x;
background-position: 95% 50%;
font-family: Trebuchet, "Trebuchet MS", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #000000;
width: 120px;
/* 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/MB%20Light%20Thin.jpg);
background-repeat: repeat-x;
background-position: 95% 50%;
font-family: Trebuchet, "Trebuchet MS", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #000000;
/* 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/MB%20Light%20Thin.jpg);
background-repeat: no-repeat;
background-position: 95% 50%;
font-family: Trebuchet, "Trebuchet MS", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #000000;
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
/* 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;
font-family: Trebuchet, "Trebuchet MS", sans-serif; -
Font Selection - Drop Down Menu Selection
Hello All,
I have a general question about the FONT selection in the menu bar in iBA that has been puzzling me.
Sometimes when I select a font within a text box and move over to the Drop Down menu within iBA the default view is the top six most recently used fonts.
At other times the font selection moves down the long list of fonts alphabetically — say to Helvetica.
I have being playing around with the key combination keys to see if holding command key or a combination will change this.
By holding down the ALT / Option key turns the FONT PREVIEW view OFF so the menu is more compressed and maybe faster to load.
Any thoughts on this would be great. I would really like to be able to jump to my top six recently used fonts by holding down a hot key rather than at random times as it seems to me right now.
Any view?
Regards,
Nigel
TOP SIX MOST RECENT FONTS
ALL THEY WAY DOWN THE LISTI downloaded it again and reinstalled it, restarted my pc, restarted illustrator, and it still didn't work - but, with my type selected, I went to Type -> Find Font and from there I managed to change it into aurulent_sans_mono ok. but even after that I still can't select it in the other ways. It's probably just a bug but at least I've found a way round it.
thanks for trying it out -
Hi everyone,
Since I upgraded to Leopard, I remarked a strange menu bar behavior, can you tell me if it's the same for you : When I click on a menu item's icon (not on whatever application menu but at the right of these, like the Bluetooth, Clock or Airport menu), first the drop menu appears. Then, if I click again on this icon, the drop down menu close itself but if I move my mouse at least one pixel in the menu bar area, it opens again. It doesn't really retract or close itself, it only opens and re-open. The only thing to do is to click outside the menu area (on the desktop) to close definitely the drop down menu. Strange!
It wasn't like this in all previous OS X and OS 9.
Do you experience the same thing? Is it a bug?
Thanks for sharing.I've already made this game. There is a much easier and more user friendly implementation. Have the user start a new game from a menu or button or whatever. Once the game is started have buttons above each row (possibly with a graphic arrow pointing down in the the color of the player who is placing the piece), when the player clicks the button drop a piece into that row.
Don't put an action in an action, you are just making complicated code. Code (especially OO) is supposed to be uncomplicated, easy to read, write, etc....
DeltaCoder
Maybe you are looking for
-
Wacom tablet on dual display dual card setup...
...and the cards are as follows, one Geforce GTX 460 (nvidia driver), one Radeon x1650 (radeon driver) As such, I have to use Xinerama and not RandR for my dual display setup. I have configured the driver to use my main display (Dell CRT on GTX 460)
-
Problem with socket connections through a proxy server.
People, I set the system properties to use a proxy server so my application can fetch data from servers located outside my local network: System.setProperty("socksProxyPort", port); System.setProperty("socksProxyHost", proxy_addy);Then, when I attemp
-
String with embedded single quote
Hi, all. We're trying to pass a string from one procedure to another, which will then do an EXECUTE IMMEDIATE on it. However, there are single quotes withing the string, and they're driving us nuts! This is what the concatenated string should look li
-
Illegal use of keyword "SELECT"...
Hi, I am new to TimesTen and using version 11.2 with Hibernate. I get the following error while running my application-- *01 Feb 2011 12:03:29,201 [WARN] org.hibernate.util.JDBCExceptionReporter: SQL Error: 7025, SQLState: 37000* *01 Feb 2011 12:03:2
-
No battery percentage at top of screen.
Why dosen't my iPad 2 no longer show battery percentage at top of screen.