Dropmenu Toolbar Javascript Code


/* =========================================================================== *\
*  ===========================================================================
* MenuNode()
* Constructs a MenuSystem node by setting properties based upon it's type.
* ---------------------------------------------------------------------------
* param : sType (String) : type of node (file or folder).
* param : sName (String) : menu-node identifier.
* param : sText (String) : menu-item's text.
* param : sURL  (String) : menu-item's target URL.
* param : sTarg (String) : name of a target element for MenuSystem HTML.
* ---------------------------------------------------------------------------
* returns : nothing.
\* =========================================================================== */

function MenuNode(sType, sName, sText, sURL, sTarg)
{
    this.NodeName = sName;
    this.NodeText = sText;
    this.NodeURL = sURL;
    this.AppendChild = AppendChild;
    this.NodeParent = null;
    this.IsSelected = false;

    /// --------------------------------------------------
    /// this.MakeAllMenuHTML = MakeAllMenuHTML;
    /// creates all MenuSystem DHtml menu blocks, including the parent-toolbar.
    /// params : none. returns : MenuSystem DHTML string
    this.MakeAllMenuHTML = function() {

        var sNodeHTML = "";
        var sCssClass = this.MenuListType == 1 ? "menu-toolbar" : "menu-dropdown";
        if(this.ChildNodes)
        {
	        var sMenuItems = MakeMenuHTML(this, true);
	        sNodeHTML = "\r\n\t<div class=\"" + sCssClass + "\" id=\"" + this.NodeName + "\">" + sMenuItems + "\t </div>\r\n";
	        for(var ii = 0; ii < this.ChildNodes.length; ii++) sNodeHTML += this.ChildNodes[ii].MakeAllMenuHTML();
        }
        return sNodeHTML;
    }

    /// --------------------------------------------------
    /// this.SetSelectedNode;
    /// sets IsSelected property for given node, and all of its parent nodes, recursively.
    /// this property is set to allow glyphs to indicate to user where they are in the Website
    /// param : oMenuNode (object) selected child-node. returns : nothing
    this.SetSelectedNode = function() {

        this.IsSelected = true;
        if(this.NodeParent) this.NodeParent.SetSelectedNode();
    }

    /// --------------------------------------------------
    /// this.DeriveSelected;
    /// locates and demarks selected menu-item via current-page context.
    /// params : none. returns : current context selected node
    this.DeriveSelected = function() {

        var sNodeUrl = this.NodeURL.toLowerCase().replace("http://" + location.host, "");
        var sLocHref = unescape(window.location.href.toLowerCase().replace("http://" + location.host, ""));

        if (sLocHref.substring(sLocHref.length - 1) == "/") {
            sNodeUrl = sNodeUrl.substring(0, sNodeUrl.lastIndexOf("/") + 1);
            sNodeUrl = sNodeUrl.length ? sNodeUrl : "/";
        }

        /// Apply the breadcrumb related-item property;
        /// if(sNodeUrl == sLocHref) return this;
        if (sNodeUrl == sLocHref) {
            if (this.NodeParent) {
                var oRelatedNodes = this.NodeParent.ChildNodes;
                for (var jj = 0; jj < oRelatedNodes.length; jj++)
                    oRelatedNodes[jj].IsRelated = true;
                this.NodeParent.IsRelated = true;
            }
            return this;
        }

        if (this.ChildNodes) {
            for (var ii = 0; ii < this.ChildNodes.length; ii++) {
                var oCurrent = this.ChildNodes[ii].DeriveSelected();
                if (oCurrent) return oCurrent;
            }
        }
        return null;
    }

    switch(sType)
    {
        case "FILE" :
	        break;

        case "ROOT" :

	        /// --------------------------------------------------
	        /// root-only...
	        this.MenuSystem = this;

	        /// --------------------------------------------------
	        /// InitMenuSystem -
	        /// Initializes the MenuSystem object by calling functions to insert menus'
	        /// HTML into a parent-container DIV. Then activates the MenuSystem by setting
	        /// menu properties and event handlers for each menuitem.
	        /// param : oMenuNode (optional) returns : nothing.
	        this.InitMenuSystem = function(oSelectedNode)
	        {
		        var oSelectedNode = oSelectedNode ? oSelectedNode : null;
		        if(!oSelectedNode) oSelectedNode = this.DeriveSelected();
		        if(oSelectedNode) oSelectedNode.SetSelectedNode();
		        this.InsertMenuHTML();
		        this.ActivateMenu();
	        }

	        /// --------------------------------------------------
	        /// this.InsertMenuHTML -
	        /// Creates and inserts all menu HTML into the root-container DIV element.
	        this.InsertMenuHTML = function()
	        {
		        var sMenuHTML = this.MakeAllMenuHTML();
		        var oMenuDiv = document.getElementById("menusyst-" + this.NodeName);
		        oMenuDiv.innerHTML = sMenuHTML;
	        }

	        /// --------------------------------------------------
	        /// additional root properties...

	        /// --------------------------------------------------
	        /// remember browser types...
	        this.IsIE5Dom = document.getElementById && document.all;
	        this.IsNS6Dom = document.getElementById && !this.IsIE5Dom;

	        /// --------------------------------------------------
	        /// set child-menu arrow indicator...
	        this.GlyphRightMenu = "";

	        /// --------------------------------------------------
	        /// set root menu (toolbar) properties.
	        this.MenuLeft = 0;			/// absolute x coordinate of menu toolbar.
	        this.MenuTop = 0;			/// absolute y coordinate of menu toolbar.
	        this.MenuListType = 0;		/// toolbar type : 0 for vertical (set to 1 for horizontal).
	        this.DropMenuOffset = 0;	/// pixel x-offset for drop menus from horizontal toolbar.

	        /// --------------------------------------------------
	        /// locate and/or write the parent menu container.
	        /// <span id="menusystem-container"></span>
	        if(sTarg != "menusyst-" + this.NodeName) {
		        var oMenuDiv = document.getElementById(sTarg);
		        oMenuDiv.innerHTML = "<span id=\"menusyst-" + this.NodeName + "\"></span>";
	        }

        default :
	        /// --------------------------------------------------
	        /// add array of submenu items.

	        this.ChildNodes = new Array();
	        this.ActivateMenu = ActivateMenu;
    }
}

/* =========================================================================== *\
* ===========================================================================
* AppendChild()
* Appends a child MenuItem (node) to its MenuSystem (parent-node).
* ---------------------------------------------------------------------------
* param : sType (String) : type of node (file or folder).
* param : sName (String) : menu-node identifier.
* param : sText (String) : menu-item's text.
* param : sURL (String) : menu-item's target URL.
* ---------------------------------------------------------------------------
* returns : nothing.
\* =========================================================================== */

function AppendChild(sType, sName, sText, sURL)
{
    var nLength = this.ChildNodes.length;
    this.ChildNodes[nLength] = new MenuNode(sType, sName, sText, sURL);
    this.ChildNodes[nLength].NodeParent = this;
    this.ChildNodes[nLength].MenuSystem = this.MenuSystem;
    this[sName] = this.ChildNodes[nLength];
}

/* =========================================================================== *\
* ===========================================================================
* MakeMenuHTML()
* Creates a single MenuSystem DHtml menu block.
* ---------------------------------------------------------------------------
* param : oMenuNode (Object ) : a MenuSystem menu node object.
* param : bHoverLayer (Boolean) : identifies NS4 layer-type. hover effect is created using
*          second layer with same content, but different styles.
* ---------------------------------------------------------------------------
* returns : HTML required to make all menu divs.
\* =========================================================================== */

function MakeMenuHTML(oMenuNode, bHoverLayer)
{
    var sMenuItems = "";
    var bHorizontalList = oMenuNode.MenuListType == 1;  // 1: horizontal; 0: vertical;

    if(bHorizontalList)
    {
        /// ------------------------------------------------------------------
        /// create HTML for horizontal toolbar.
        for(var ii=0; ii < oMenuNode.ChildNodes.length; ii++)
        {
	        var oChildNode = oMenuNode.ChildNodes[ii];
	        var sClsMenuItem = oChildNode.IsSelected ? "menu-item-chk " : "menu-item ";

	        sMenuItems +=
	        "\r\n\t\t\t\t <div class=\"" + sClsMenuItem + "\"><a class=\"menu-link\" " +
	        "\r\n\t\t\t\t href=\"#\"><span class=\"menu-text\">" + oChildNode.NodeText + "</span></a></div>";
        }

        return "\r\n\t\t\t <div class=\"menu-toolbar-sprite\">" + sMenuItems + "</div>";
    }
    else
    {
        /// ---------------------------------------------------------
        /// create HTML for sub menus menus.
        for(var ii=0; ii < oMenuNode.ChildNodes.length; ii++)
        {
	        var oChildNode = oMenuNode.ChildNodes[ii];
	        var sChildMenu = oChildNode.ChildNodes ? "menu-glyph" : "menu-glyph-none";
	        var sMenuGlyph = oChildNode.ChildNodes ? oMenuNode.MenuSystem.GlyphRightMenu : "";
	        if(sMenuGlyph.length) sChildMenu = "menu-glyph-none";

	        ///var sClsNodeSel= oChildNode.IsSelected ? "menu-itemSel " : "menu-item";
	        var sClsMenuItem = oChildNode.IsSelected ? "menu-item" : "menu-item";

	        sMenuItems +=
	        "\r\n\t\t\t\t <div class=\"" + sClsMenuItem + "\"><a class=\"menu-link\" href=\"#\"><span " +
	        "\r\n\t\t\t\t class=\"menu-text\">" + oMenuNode.ChildNodes[ii].NodeText + "</span><span " +
	        "\r\n\t\t\t\t class=\"" + sChildMenu + "\">" + sMenuGlyph + " </span></a></div>";
        }

        return "\r\n\t\t\t <div class=\"menu-sprite\">" + sMenuItems + "</div>";

    }
}

/* =========================================================================== *\
* ===========================================================================
* GetElementsByClassName()
* Retrieves an array of HTML elements with a given class name that exists within
* a specified HTML container element. 
* ---------------------------------------------------------------------------
* param : sClassName (String) : classname of the element-collection.
* param : oDocElement (Object) : element in which to search for collection.
* ---------------------------------------------------------------------------
* returns : array of HTML elements.
\* =========================================================================== */

function GetElementsByClassName(sClassName, oDocElement)
{
    if(document.getElementsByClassName)
        return oDocElement.getElementsByClassName(sClassName);

    /// non-mozilla...	
    var retnode = [];
    var myclass = new RegExp("\\b" + sClassName + "\\b");
    var elem = oDocElement.getElementsByTagName("*");

    for (var i = 0; i < elem.length; i++) {
        var classes = elem[i].className;
        if (myclass.test(classes)) retnode.push(elem[i]);
    }
	
    return retnode.length ? retnode : null;
} 

/* =========================================================================== *\
* ===========================================================================
* ShowMenu()
* Shows a specified MenuSystem menu object.
* ---------------------------------------------------------------------------
* param : oMenuElement (Object) : the menu div element to display.
* ---------------------------------------------------------------------------
* returns : the document menu element that is currently being shown.
\* =========================================================================== */

function ShowMenu(oMenuElement)
{
    oMenuElement.style.visibility = "visible";
    return oMenuElement;
}

/* =========================================================================== *\
* ===========================================================================
* HideMenu()
* Hides a specified MenuSystem menu object.
* ---------------------------------------------------------------------------
* param : oMenuElement (Object) : the menu div element to hide.
* ---------------------------------------------------------------------------
* returns : null value.
\* =========================================================================== */

function HideMenu(oMenuElement)
{
    oMenuElement.style.visibility = "hidden";
    if(oMenuElement.MenuShown) oMenuElement.MenuShown = HideMenu(oMenuElement.MenuShown);
    return null;
}

/* =========================================================================== *\
* ===========================================================================
* HideOpenMenus()
* Hides all visible menus from the MenuSystem root, downward.
* ---------------------------------------------------------------------------
* param : sRootName (String) : name of the MenuSystem root node.
* ---------------------------------------------------------------------------
* returns : nothing
\* =========================================================================== */

function HideOpenMenus(sRootName)
{
    var oSystemNode = document.getElementById("menusyst-" + sRootName);
    var oToolbarNode = document.getElementById(sRootName);	
    oToolbarNode.MenuShown = oToolbarNode.MenuShown ? HideMenu(oToolbarNode.MenuShown) : null;
}

/* =========================================================================== *\
* ===========================================================================
* MenuDiv_OnMouseOut()
* Performs actions required when user mouses out of a menu or an individual
* menu item. Makes sure that all visible menus get hidden.
* ---------------------------------------------------------------------------
* params : none.
* ---------------------------------------------------------------------------
* returns : true, to affirm event should be allowed to fire.
\* =========================================================================== */

function MenuDiv_OnMouseOut(e)
{
    /// ------------------------------------------------------------------
    /// hide the menus after short second delay. this action will be
    /// cancelled if user mouses over any other menu-item before then.
    window.tmr = setTimeout("HideOpenMenus('" + this.MenuSystem.NodeName + "')", 450);
    return true;
}

/* =========================================================================== *\
* ===========================================================================
* MenuDiv_OnMouseOver()
* Performs actions required when user mouses over an individual
* menu item. Makes sure that the proper menu is shown.
* ---------------------------------------------------------------------------
* params : none.
* ---------------------------------------------------------------------------
* returns : true, to affirm event should be allowed to fire.
\* =========================================================================== */

function MenuDiv_OnMouseOver(e)
{
    window.tmr = clearTimeout(window.tmr);
    if(this.ChildMenu)
    {
        /// --------------------------------------------------
        /// determine sub-menu element coords.
        if(this.ParentMenu.IsHorizontal)
        {
	        var nChildMenuX = this.ParentMenu.offsetLeft + this.offsetLeft;
	        var nChildMenuY = this.ParentMenu.offsetTop + this.offsetTop + this.offsetHeight + this.MenuSystem.DropMenuOffset;
        }
        else
        {
	        /// var nAdjustY = this.MenuSystem.IsIE5Dom ? 1 : 0;
	        var nChildMenuX = this.ParentMenu.offsetLeft + this.offsetWidth - 1;
	        var nChildMenuY = this.ParentMenu.offsetTop + this.offsetTop;
        }

        /// --------------------------------------------------
        /// situate the child menu.
        this.ChildMenu.style.left = nChildMenuX + "px";
        this.ChildMenu.style.top = nChildMenuY + "px";
    }

    /// remember current menu context
    window.mnu2 = this;

    /// add a slight delay before showing/hiding submenus.
    if(this.parentNode.className == "menu-sprite")
        window.tmr2 = setTimeout("ToggleMenu()", 400);
    else
        ToggleMenu();

    return true;
}

/* =========================================================================== *\
* ===========================================================================
* ToggleMenu()
* This function is used with a times to add hesitation before we show/hide submenus.
* ---------------------------------------------------------------------------
* params : none. --- code was added on 2007-09-20
\* =========================================================================== */

function ToggleMenu()
{
    clearTimeout(window.tmr2); var obj = window.mnu2;
    if(obj.ParentMenu.MenuShown) obj.ParentMenu.MenuShown = HideMenu(obj.ParentMenu.MenuShown);
    if(obj.ChildMenu) obj.ParentMenu.MenuShown = ShowMenu(obj.ChildMenu);
}

/* =========================================================================== *\
* ===========================================================================
* MenuDiv_OnClick()
* Performs actions required when a user clicks on a menu item (changes location.href).
* ---------------------------------------------------------------------------
* params : none.
* ---------------------------------------------------------------------------
* returns : false, to cancel click event.
\* =========================================================================== */

function MenuDiv_OnClick()
{
    if(this.ItemHref && this.ItemHref.indexOf("#") != 0)
        window.location.href = this.ItemHref;

    return false;
}

/* =========================================================================== *\
* ===========================================================================
* ActivateMenu()
* Sets custom properties for each menu element, and moves the element to its
* proper location on the webpage.
* ---------------------------------------------------------------------------
* params : none.
* ---------------------------------------------------------------------------
* returns : nothing.
\* =========================================================================== */

function ActivateMenu()
{
     var oRootDiv = document.getElementById("menusyst-" + this.MenuSystem.NodeName);
     var oParentDiv = document.getElementById(this.NodeName);
     var oChildNodes = this.ChildNodes; 

     /// ----------------------------------------------------------
     /// get menu elements.
     var oMenuItems = GetElementsByClassName("menu-text", oParentDiv);
     oParentDiv.MenuSystem = this.MenuSystem;

     /// ----------------------------------------------------------
     /// make sure each menu element is always on top.
     oParentDiv.style.zIndex = (document.body.childNodes ? document.body.childNodes.length : document.body.children.length) + 1;

    if(this.MenuSystem == this)
    {
        /// --------------------------------------------------
        /// set innerHeight value for IE -- no part of menu should be situated below this Y coord.
        if(this.IsIE5Dom)
        {
	        window.innerHeight = document.body.clientHeight + document.body.offsetTop;
	        window.innerWidth = document.body.clientWidth + document.body.offsetLeft;
        }

        /// --------------------------------------------------
        /// set custom menu element properties.
        oParentDiv.IsHorizontal = this.MenuListType == 1;
        oParentDiv.style.left = this.MenuLeft;
        oParentDiv.style.top = this.MenuTop;
        oParentDiv.style.visibility = oRootDiv.style.visibility = "visible";

        /// --------------------------------------------------
        /// make sure that toolbar system element is always on top.
        oRootDiv.style.zIndex = (document.body.childNodes ? document.body.childNodes.length : document.body.children.length) + 1;
    }

    for(var ii=0; ii < oChildNodes.length; ii++)
    {
        var oMenuItem = oMenuItems[ii].parentNode.parentNode;
        if(oParentDiv.IsHorizontal) oMenuItem = oMenuItems[ii].parentNode.parentNode;

        oMenuItem.ChildMenu = document.getElementById(oChildNodes[ii].NodeName);
        oMenuItem.ChildNode = oChildNodes[ii];
        oMenuItem.ItemHref = oChildNodes[ii].NodeURL;
        oMenuItem.MenuSystem = this.MenuSystem;
        oMenuItem.ParentMenu = oParentDiv;
        oMenuItem.onclick = MenuDiv_OnClick;
		
        // if(this.IsIE5Dom)
        // {	// less event bubbling...
        //	oMenuItem.onmouseleave = MenuDiv_OnMouseOut;
        //	oMenuItem.onmouseenter = MenuDiv_OnMouseOver;
        // }
        // else
        // {
	        oMenuItem.onmouseout = MenuDiv_OnMouseOut;
	        oMenuItem.onmouseover = MenuDiv_OnMouseOver;
        // }

        oMenuItem.onblur = oMenuItem.onmouseout;
        oMenuItem.onfocus = oMenuItem.onmouseover;

        /// --------------------------------------------------
        /// activate (set properties for) each child menu.
        if(oMenuItem.ChildNode.ActivateMenu) oMenuItem.ChildNode.ActivateMenu();
    }
}


// ***************************************************************************
/* =========================================================================== *\
   Creating the menu-system from custom function ~
\* =========================================================================== */

function CreateMenuSystem(sContainer)
{
    // formulate name of menu-parent div to be written under container div.
    // create the root node and append children...
    var sContainer = sContainer ? sContainer : "menusyst-menucontent";
    var oMenuSystem = new MenuNode("ROOT", "menucontent", "#", "#", sContainer);

    with(oMenuSystem)
    {
        //' ----------------------------------------------------------
        //' write the javasctipt menu nodes.
        AppendChild('FILE', 'Homepage', 'Homepage', 'pages/default.htm');

        AppendChild('FOLDER', 'Resume', 'Resumé', '..pages/andy-gillis-resume.htm');
        with(Resume) {

	        AppendChild('FILE', 'Html_Format', 'Html Version', '..pages/andy-gillis-resume.htm');
	        AppendChild('FILE', 'Word_Format', 'MS Word-Format', 'data/andy-gillis-resume.doc');
        }

        AppendChild('FOLDER', 'Design', 'Design', 'pages/design.htm');
        with(Design) {

	        AppendChild('FOLDER', 'Online_Portfolio', 'Online Portfolio', 'pages/artwork-portfolio.htm');
	        with(Online_Portfolio) {
		        AppendChild('FILE', 'Painting_Old_Boat', 'Painting: Old Boat', 'pages/painting-old-boat.htm');
		        AppendChild('FILE', 'Painting_Pike_Place', 'Painting: Pike Place', 'pages/painting-pike-place.htm');
		        AppendChild('FILE', 'Drawing_Dead_Guy', 'Drawing: Dead Guy', 'pages/drawing-dead-guy.htm');
	        }

	        AppendChild('FOLDER', 'Web_Design', 'Web Design', 'pages/design.htm');
	        with(Web_Design) {
		        AppendChild('FILE', 'Information_Design', 'Information Design', 'pages/design.htm');
		        AppendChild('FILE', 'Componentize', 'Componentize', 'pages/componentize.htm');
		        AppendChild('FILE', 'Simplify_Content', 'Simplify Content', 'pages/simplify.htm');
		        AppendChild('FILE', 'Enable_Users', 'Enable Users', 'pages/enable.htm');
		        AppendChild('FILE', 'Stylesheets', 'Stylesheets', 'pages/stylesheets.htm');
	        }
        }

        AppendChild('FOLDER', 'Development', 'Development', 'pages/development.htm');
        with(Development) {

	        AppendChild('FILE', 'Scripting_Links', 'Scripting Links', 'pages/scripting-links.htm');
			
	        AppendChild('FOLDER', 'Coding_Samples', 'Code Samples', 'pages/development.htm');
	        with(Coding_Samples) {

		        AppendChild('FOLDER', 'Application_Menubar', 'DHtml Menubar', 'pages/application-menubar.htm');
		        with(Application_Menubar) {
			        AppendChild('FILE', 'Drop_Menubar', 'Drop Menus', 'pages/application-menubar.htm');
			        AppendChild('FILE', 'Vertical_Menubar', 'Vertical Menus', '/tracking/development/pages/vertical-menubar.htm');
		        }

		        AppendChild('FILE', 'Slide_Show', 'Slide Show', 'pages/slide-show.htm');
		        AppendChild('FILE', 'Date_Selector', 'Date Selector', 'pages/date-selector.htm');
		        AppendChild('FILE', 'Early_Render', 'Early Render', 'pages/early-render.htm');
		        AppendChild('FILE', 'Help_System', 'Help System', 'pages/help-system.htm');
		        AppendChild('FILE', 'Window_Opener', 'Window Opener', 'pages/window-opener.htm');
	        }
        }

        AppendChild('FILE', 'About', 'About', 'pages/about.htm');

        //' ----------------------------------------------------------
        //' set attributes applicable to root-menu.
        DropMenuOffset      = 3; /// 6;
        MenuListType        = 1; /// parent menu links are horizontally oriented.

        /// --------------------------------------------------
        /// set child-menu arrow indicator...
        /// GlyphRightMenu = "";
    }

    return oMenuSystem;
}


// ***************************************************************************
/* =========================================================================== *\
   Calling the menu-system via window.onload ~
\* =========================================================================== */

//<![CDATA[
    var g_oMenuSystem = CreateMenuSystem();
    function Window_OnLoad() {
        g_oMenuSystem.InitMenuSystem();
    }
    window.onload = Window_OnLoad;
//]]>


// ***************************************************************************
/* =========================================================================== *\
   Menu-system stylesheet dependency ~
\* =========================================================================== */

/* CSS Definitions... */

/* menusyst shell */
div#menusyst-menucontent  {
    position: relative;
    top: 0 !important;
    z-index: 99
}

/* menusyst toolbar and menus */
div.menu-toolbar,
div.menu-dropdown {
    position: absolute;
    visibility: hidden; 
    cursor: pointer
}

/* menusyst toolbar height (static div) */
div.menu-toolbar {
    position: static;
    height: 2em
}

/* menusyst toolbar sprite */
div.menu-toolbar-sprite {
    position: relative;
    height: 1.8em;
    line-height: 1.8em;
    overflow: hidden;
    color: #f3f3ec
}
div.menu-toolbar-sprite div.menu-item, 
div.menu-toolbar-sprite div.menu-item-chk {
    float: left;
    position: relative;
    margin: 1px 0 2px 0;
    padding: 0 48px 0 16px
}
div.menu-toolbar-sprite a {
    color: #f3f3ec;
    text-decoration: none
}
div.menu-item-chk a {
    color: #f0c060
}

/* menusyst menu sprites */
div.menu-sprite {
    border-bottom: solid 1px black
}
div.menu-sprite div.menu-item {
    position: relative;
    min-width: 14em;
    text-align: right;
    border: solid 1px black;
    border-bottom: 0;
    background-color: #fcf6df;
    clear: right
}
div.menu-sprite a.menu-link {
    display: block;
    height: 1.8em;
    line-height: 1.8em;
    color: #001133;
    text-decoration: none;
    background-color: #fcf6df;
    cursor: pointer
}

div.menu-sprite a:hover.menu-link {
    background-color: #ddd
}

/* there's an ie 8 hover bug ? */
div.menu-sprite a:hover {
    background-color: #ddd !important
}
div.menu-sprite span.menu-text {
    float: left;
    position: relative;
    padding: 0 2em 0 1em
}
div.menu-sprite span.menu-glyph,
div.menu-sprite span.menu-glyph-none {
    padding-right: 1em;
    text-align: left;
    font-size: 1em;
    font-family: arial, helvetica
}
div.menu-sprite span.menu-glyph {
    background-image: url(images/rightarrow.gif);
    background-repeat: no-repeat;
    background-position: 50% 0
}