Resizable menu items on mouse hover

Hello
I need to make a resizeable menu like the menu.gif picture I uploaded. For example the menu to have 5 or 6 elements doesnt matter the problem is to make them adjustable on size (will be different movie clips each one) on mouse hover over each one of them but also snap like this. If someone have any code that could help me please tell me
Thank you all!

thank u i ll search it!

Similar Messages

  • Want to display menu item horizontally in hover menu control?

    hi,
    I have to display 3 buttons as menu items in a hover menu horizontally. As the hover menu control only show the menu items in vertical form, but for a specific task, i have to place 3 buttons side by side in hover menu. if anyone have tried this please help me.
    Thanks in advance
    Deepak

    Hi,
    I have a suggestion:
    Design your page into tables and rows.
    Divide each row into columns.Example:
    <table>
    <tr>
    <td>
    <hbj:hoverMenu
      id="hover1"
      standAlone="true">
    <hbj:hoverMenuItem
        id="1"
        text="Size"
        />
    </hbj:hoverMenu>
    </td>
    <td>
    <hbj:hoverMenu
      id="hover2"
      standAlone="true">
    <hbj:hoverMenuItem
        id="1"
        text="Size"
        />
    </hbj:hoverMenu>
    </td>
    </tr>
    </table>
    If you want to align the sub menu accordingly,you can again divide each row of the table into a subtable with rows and columns.
    Hope this helps.
    Regards,
    Harish
    (Please award points if this answer is usefull)

  • Own menu item on matrix righ click

    Hi
    How can i add my own menu item on mouse right click event on a matrix in a form.
    I want my menu to appear when i right click on a row in matrix in sales order form. I want to be able to get the row no of the matrix when i choose my menu.
    Thanks
    Satish Dwevedi (Dev)

    What version of SBO are you using? In 2004, there is no right click event, (2005 does have a right_click event) so it can give a little trouble. Mostly a right click triggers a normal click event, but not always.
    Adele is right for the menu adding, you can add menuitems directly to the forms own menu.
    However, the clicked row is not in the pVal.Row value, because the click on the context menu does fire a menuevent, wich does not have a pVal.Row variable.
    You should have a global variable, and when the right clickevent occurs, save the row from pVal.Row. When later the menuclick occurs get the row from your global variable and perform your tasks.
    <b>Code (C#):</b>
    /* Global variable */
    private int myRow;
    /* Add the menu */
    /* Add a procedure to add your form, see the UI API*/
    public override void Handle_ItemEvent(string FormUID, ref ItemEvent pVal, out bool BubblesEvent)
      /* Catch the click */
      if((pVal.EventType == et_Click) && (FormUID == "MY_FORM_UID") && pVal.beforeAction)
        myRow = pVal.Row; 
      BubblesEvent = false;
    public override void Handle_MenuEvent(ref MenuEvent pVal, out bool BubblesEvent)
      /* catch the menuclick */
      if((pVal.MenuUID == "My_Context_MenuUID") && pVal.BeforeAction)
        NiceFunctionToHandleMenuClickEvent();
      BubblesEvent = false;
    private void NiceFunctionToHandleMenuClickEvent()
      /* Add your procedure wath you want to do with the row */
      /* The row is stored in myRow */
    Hope it helps, Rowdy

  • Firefox 4 Menu Bar - When I hover over or select a menu bar item, the menu bar sub-menu becomes transparent and unreadable. Is this a known issue that can be corrected with an update or is it functionality that is not designed to work with this version?

    Firefox 4 Menu Bar - When I hover over or select a menu bar item, the menu bar sub-menu becomes transparent and unreadable. Is this a known issue that can be corrected with an update or is it functionality that is not designed to work with this version?

    If this happens on monitor 2 of 2, this problem has been solved here:
    http://support.mozilla.com/en-US/questions/794823#answer-157988
    Go to "Firefox"--> "Options" --> "Advanced"
    Then un-check "Use hardware acceleration when available"
    While not verified, I believe this problem is due to an SLI configuration where the focus is on monitor 1. (I.e acceleration is available, but only on monitor 1.)

  • Why does my Desktop Mouse freeze (moves erratically) when selecting menu items in PSE13 Editor?

    It seems that my computer with 8GB of memory may not be enough to use PSE13.    The Organizer menu works fine when I select menu items.   The problem is when I switch to the Editor.   My mouse starts to freeze, move fast, or too slow.  It is difficult to select
    a menu item in this situation.

    Unusual. In theory PSE13 should be better as it's a 64 bit application.
    Can you try re-setting the prefs then close and re-launch the Editor. First you need to go to:
    Edit >> Preferences >> General
    Then click the button shown on the image below.

  • Iframe disappears on mouse over menu item

    ok, I have this page
    http://www.nmprc.state.nm.us/consumer.htm
    that if you click on "Consumer Guides for Getting & Keeping
    Health Insurance" pulls up an iframe...but when you mouse over
    other items on the page, the iframe disappears. ( in IE and FF)
    here is the xml that pulls the iframe...thanks for your help
    <consum>
    <name><![CDATA[Consumer Guides for Getting &amp;
    Keeping Health Insurance]]></name>
    <desc><![CDATA[<h2 align="center">Consumer
    Guides for Getting &amp; Keeping Health
    Insurance</h2><iframe src="
    http://www.healthinsuranceinfo.net/"
    width="510"
    height="650"></iframe>]]></desc>
    </consum>

    just wondering about this still, is it a z-index thing, do I
    need to give the iframe a higher z-index?
    I have tried several solutions, but it still disappears on
    mouse movement over the menu items...not the initial mouse over,
    but any change after that...to menu subitem or another main menu
    item
    The wierd thing is I have other iframes and they don't
    disappear, only this one....

  • Can Dropdown menu item stay on the "roll over" state while the user's mouse is hoving over the sub

    Can Dropdown menu item stay on the "roll over" state while the user's mouse is hoving over the parent's sub-menus?
    Thanks

    Thanks for the response. My main goal here is to get the drop
    down menu word "Overview" to remain red once it reaches the frame
    "WhoWeAre" or "OurMission" on the main timeline. If I turn the
    button inside the movie clip into an MC to do this, the drop down
    menu no longer works. Any thoughts on how to get this drop down
    menu to do this?

  • I can't access menu items, nor use mouse right click

    I'm using Ubuntu 9.10 and all of a sudden I cant use the mouse to access the menu items, nor use the right click menus. I can click on button and links with the left button, but right clicking on a link does not bring up the usual menu. I recall this happening in the past, but an exit and restart of the program cleared it up. Reboot are not fixing the problem, nor reinstallation ( after removal).

    It seems it could be a profile corruption issue, but not quite!
    I was having the same issue (I'm running Lucid Lynx) and after starting Firefox with the -profilemanager option and using the default profile, I was able to access the menu items and get a right-click options menu. I then shutdown Firefox and restarted with my regular profile and it is now working just fine!
    A little weird, but hey, I can access the menu items as per normal.
    FYI: I had to purge and reinstall Adobe Flashplugin just yesterday then today I got this problem soon after one application crashed in Wine - not sure if all these things are related though!
    Ciao,
    ak.

  • Spry Menu Bar - Freezing the Menu item in hover when clicking a submenu item

    Hi,
    I am trying to add a feature to a verticle spry menu bar that freezes the menu item or "parent" (to apear to be hovered) when clicking one of the parents sub-menu items. I want to do this so that users can know how they arrived at the page they're on.
    Thanks for your help,
    -Shiva

    To look at your intention in a different way,
    Hover over a submenu item
    Parent item is colored/indicated
    Submenu item is colored/indicated
    Click on the submenu item
    New page opens
    Parent item "remains" colored/indicated on the new page
    There are three or four ways to do this, depending on your site setup, but one basic concept to understand. The emphasis on the Parent menu item is totally independent of whether you got to the new page via the menu or by some other means. The emphasis will always be there, though it will appear to be connected to your clicking on the menu!
    Say you have a menu with two Parent menu items, flowers and trees.
    On the Flowers menu are submenus: Tulips, Roses, and Gardenias, On all three different Flowers pages (Tulips, Roses, Gardenias), the Flowers parent item will be emphasized.
    On the Trees menu are submenus: Oak, Maple, Spruce. On all three different Trees pages (Oak, Maple, Spruce), the Trees parent item will be emphasized.
    If you want to go in to each page individually, you can use a general indicator like id="localemphasis". (To emphasize more than one thing on a page, use a class instead of an id)
    Using this method, on the Tulips, Roses, and Gardenias pages, put id="localemphasis" on the Flowers parent menu item.
    On the Oak, Maple, and Spruce pages, put id="localemphasis" on the Trees parent menu item.
    To control the emphasis from the CSS stylesheet, you won't need to go into each page, but you will ID each parent menu item.
    Give each 'category' (Flowers, Trees) page a body ID to match the category
    Every Flower page wants the Flower parent menu item emphasized, give all three Flower pages a body tag like this: <body id="flowers">
    LIkewise, every Tree page wants the Tree parent menu item emphasized, as <body id="trees">
    Within the menu itself and on ALL pages, give each parent menu item an id to correspond to its category
    <li id="flowers_m">Flowers</li>
    <li id="trees_m">Trees</li>
              I have added a "_m" to remind myself that it is the menu item's id. You might need to put the id on the <a> link if you have not used a list for your menu.
    In your CSS stylesheet,
         #flowers #flowers_m,
         #trees #trees_m  {background-color: red; color: white;}
    Please use your own code! White on red might not be your cup of tea...use the same styling as the "hover" styling you mention in your query.
    To interpret what we have just done, we have said
         make the background-color red and the text white
    for the parent menu item Flowers (id="flowers_m") when you are on a Flowers page (body id="flowers")
    and for the parent item Trees (id="trees_m") when you are on a Trees page (body id="trees").
    This emphasis is good feedback for your user...remember that for SEO purposes, you will also want to use actual HTML text to reinforce the page environment, that is, h1 titles like FLOWERS and TREES. That will provide more feedback for your user.
    Beth

  • Unable to create Menu Item List Buttons in Forms - Not Working!

    Hi guys,
    I need desperate help since I have been stuck on these for 2 days and I am unable to move forward!!
    I am trying to create a pdf form using Acrobat pro 9 and Adobe LiveCycle Designer ES. Since I am new to this, I have been browsing through numerous sites, forums and tutorials to learn about this. So far, I was able to create the forum with text fields, etc.. I am trying to have a column in my pdf form where the users can simply copy & paste image icons here..I was having difficulty with this already and have done numerous searches in google. In the end, I thought I am better off trying to use the "stamp" tool for this instead of image field. So this is what I did:
    1) I already placed the image icons (that the users will be copying & pasting) on my pdfs so users can simply click on it to select the image.
    2) I added a new bottom to this form which has the short cut to the menu item "copy" function. I labeled this button as 'Copy' and to this button, I added the following javascript for "Mouseup":
    app.execMenuItem("CopyFileToClipboard");
    3) Next I created another button that I called 'paste' and this button executes the "Paste Clipboard Image as Stamp Tool" menu. This button has the following javascript:
    app.execMenuItem("Annots:Tool:StampFromClipboardMenuItem");
    I thought that after doing the above, the user should be able to click on one of the images in the pdf, then click on 'copy' button and in the end click on 'paste' button that will then run an action so user can stamp this copied image to where ever they want in that file. But this is not happening!! I dont why?? Nothing happens when these buttons are clicked. I have made sure that the "Extended features in Adobe Reader..." is enabled and also tried running the above javascripts on my console window to test it and i know that the actual javascript code is not at fault since these functions works when I try the code through the debugger window. But I just cannot figure out why these menu item functions are not working when the buttons I had created are clicked!!! I dont know if what I have done is correct or if there is a easier way to achieve what I am trying to do!! Its a shame there is no simpler way for the end-users to copy and paste images to the columns in the pdf forms.
    please help me understand why the above button are not working....any help will be great!!

    Hi Paul,
    This is further to our email correspondence. I am just pasting your email response here since it may be useful to other newbies like me:
    "Ok here you go ......I had to add the new row via a script object as the new objects are not completely available until the script ends so I cannot resize the new row from teh current script.
    Then when we resize - we have to resize the row, the cells and the image ....we start with all existing subforms then we do it for the new row that was just added.
    Lastly I see that you have a delete row button. This will have to be part of the row otherwise we ill not know which row the user will want to delete .....unless you ask them (which is not good UI design)."
    I was really impressed the way you modified the script so the table height does not change when new rows are added. That did help me in understanding the methods and it will certainly be v useful to me in the future. I have been practicing and getting a hang of LS and I have actually decided to redesigned my form since it appears that trying to have a fixed table height is quite a bit of work each time a row is added, removed or changed, etc... Your advise so far have been v helpful and it has helped me in redesigned the form into a different layout. So far so good...However, I just have a few more clarifications regarding some hurdles I am facing:
    PS: I have emailed you a sample of my new form now so you can have a look at it.
    1) Dynamic Image fields:
    In this form, I have a subform that has a dropdown list and next to this, I have an image field. I want to change the image based on the selection in the dropdown list. I found a few samples and tutorials on this already and I tried 2 different approach for this. One works and the other doesnt.
    Method that works: What I have done here is, I added all the images in the form and have put their presence to invisible. Then using the javascript, I am making the image visible based on the selection in the dropdown list. I found this method somewhere through googling and it works.
    Method that doesnt work: Its similar to the above, but instead of putting all the images in the form, I just inserted 1 image field and then tried to change the url of this dynamic image based on the selection in the drop down list. But this method is not working. I tried inserting this jscript and nothing happens:
    switch (this.rawValue)
    case "1":
    myImages.value.Image.href=http://www.mysiteaddress.com/blah_blah.jpg;
    break;
    case "2":
    myImages.value.Image.href=http://www.mysiteaddress.com/blah_blah2.jpg;
    break;
    The 2nd method does not work. Although I know the method 1 above works and I am currently using it, I am just curious to find out why the 2nd method is not working? Did I get the script wrong or is this feature no longer allowed? I just thought that if the second method works fine, it saves the hassle of putting all the images on the form and then making them hidden. Instead, I just need to put one image field and then dynamically change its image based on the selection. I hope this make sense..please advise..
    2) Changing the background colour of the Dropdown list box:
    I am trying to change the bg colour of the listbox in the dropdown list object (only the listbox bg color and not the whole background color). So, I added the following script to the mouseEnter event and this works:
    var vName = this.somExpression;
    var fieldObj = xfa.resolveNode(vName + ".ui.#choiceList.border.fill.color");
    fieldObj.value = "255,255,225";
    My Problem: The above script works so I dont need to change anything there. But, I also want to add another script to the mouseExit event to change the fill color to its default once the mouse leaves the dropdown lists. Initially, this field has no fill colour and the border fill style is none. The fill color is only added during the mouseEnter event. How do I change the bg color fill back to none during mouseExit after the above script is executed on mouseEnter?
    (NOTE: If you see my form, I have used the above scripts for the dropdown list only in "boxSubform[0]".)
    3) Changing the length of the Dropdown List box:
    I only have about 1.6 inches workspace to add this dropdown list box. However, the length of some lists (list items) in this dropdown list box is actually longer and the remaining part is cut out. So, I added the following script to increase the dropdownlist length and it does not work the way I would have hoped...
    The script I have written so far:
    I added these to the mouseEnter event and it works fine -
    form1.pageSubform.dynamicSubform.Table1.Row1.boxSubform[0].MyDropdown::mouseEnter - (JavaScript, client)
    this.w = "2in";  //this is to to increase the width of the dropdown list
    I added these to the mouseExit event and it works fine too-
    form1.pageSubform.dynamicSubform.Table1.Row1.boxSubform[0].MyDropdown::mouseExit - (JavaScript, client)
    this.w = "1.625in";
    When I tested the form with the above script, this is what happens:
    1) First when you move the mouse over this field, the width increases. Similarly the width decreased when you move away.
    2) So, even if this is clicked, the list box is opened with this 2inch width so thats good.
    3) There are no problems when the mouse is moved over these list items as well. However, this does not look good when the dropdown list item is clicked with its item lists open and then the mouse leaves this area. In this case, as soon as the mouse leaves this area, the mouseExit script runs and hence it makes the drop down list width to shrink eventhough the list items are still open. How do I resolve this? I was thinking about this and I thought the possible way to overcome this is by writing a javascript for the mouseExit event executing something like this:
    if this dropdown list is open,
    then  this.w = "2in";
    else
    this.w = "1.625in";
    I am not sure how to write a jscript for the above?
    (NOTE: If you see my form, I have used the above scripts for the dropdown list in "boxSubform[0]".)
    4) Hiding the alternative row shadowing for hidden columns:
    If you check out my form, you can notice that I have put the "close" button (button to delete table rows) on the left column and I have also put its presence to "Visible (screen only)". The parent table has got the 'alternative row shadow' checked. What I notice here is, when this page is printed, eventhough the first column's presence is set to "Visible (Screen Only)", it still prints the row shadow for this column and it looks bad. How can I fix this? Any help will be great!
    I have already emailed you my new form again so you can have a look.
    Thanks again Paul and I cant thank you enough for your help. I am sooo happy to see such a great support and resources available here since it can be a nightmare for some newbies like me... :-)

  • Adding A Separate Background Image For Each Menu Item

    I asked this in the Spry forum, and not sure I understand the answer. Plus, I should have been more specific in asking how to do it, as I'm still pretty new to this stuff. Nothing I'd found indicated it could be done, or how.
    Org question -
    I know you can apply a background image to the menu bar items, but is it possible to add a background image for each individual item? What I'm basically trying to keep are the effects (bevel/emboss, etc.,) that I attached to the text, when I created it in PS CS4.
    Answer -
    Yes you can. The widget is just normal plain html markup so you can just add other classNames or id attributes to the elements. And style the elements through those classes/ids.
    Does this mean I'd have to write a new rule for each menu item? What?
    Thank you.

    Did an Adobe Tutorial for creating/entering a Spry Menu Bar. This is the HTML, after I took out the submenus.
    <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="news.html">Features</a></li>
          <li><a href="news.html">News</a></li>
          <li><a href="news.html">Fashion</a></li>
          <li><a href="news.html">Lifestyle</a></li>
          <li><a href="news.html">Calendar</a></li>
        </ul>
    This is from the SpryMenuBarHorizontal.css (It seems like I need to make changes in the Design Info section of this code. But nothing I've tried has worked):
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    text-transform: uppercase;
    /* 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: 7em;
    float: left;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 8.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #EEE;
    color: #333;
    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: #33C;
    color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #33C;
    color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;

  • Mouse hover style not changing

    Hello
    I am working on branding and am not getting the mouse hover css  like
    About Us same I want to do in Resource,selfservice,AdminLinks in second image
    Thanks,

    Its Top Navigation bar and the class name is "menu-item-text" .In the same top navigation bar I have subsite also when I mouse hover on that than am getting background image on mouse hover.

  • Mouse hover issue

    Hover functions seems to be completely inop. Menu items will not highlight unless I keep the mouse button depressed. Hovering over link items in Safari does not change the cursor or display info banners. Most vexing of all, in Photoshop Elements 4.0, the cursor disappears completely when over the workspace unless the button is depressed. Rebooting has not resolved the issue. Any ideas?

    I hooked up the ol' mighty mouse and it corrected the issue, but I'd like to know how to resolve the root problem. This only came up a couple days ago, and my wireless mouse has been working fine for over a year prior.
    EDIT: Okay, I just moved the wireless mouse receiver from my USB hub to a port on the laptop and the issue went away. Weird.
    Message was edited by: Jungle Japes

  • IE reversing order of spry menu items

    I've created a horizontal spry menu bar, and it works great except for one problem. When I open my page in Internet Explorer, the order of menu items from left to right is reversed. For example, "Home", which is my first item in the menu, is supposed to appear on the left, but instead it appears on the right. The menu bar itself is in the correct position, it's just the menu items that are reversed. When I open the page in Firefox or Safari, the order is correct - it's just an IE problem. Any suggestions would be much appreciated. Thanks!

    Thanks Ben, here's the code. I was doing some experimenting, and I changed the float property under ul.MenuBarHorizontal li.MenuBarItemIE to "right" instead of "left" as it is shown below. This caused the menu items to appear in the correct order, but it also caused the sub-menu items to appear in a horizontal line below the menu, when in fact they should be hidden until you hover over the corresponding item in the main menu. So I traded one problem for another! Any help would be much appreciated.
    To see how it`s rendering, visit http://www.leagueheadquarters.com/RAB. If you look at it in Firefox, you`ll see how it`s supposed to look, and in IE you`ll see the menu items reversed.
    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: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
        font-family: Verdana, Geneva, sans-serif;
        font-variant: normal;
        text-transform: none;
        color: #1f3d73;
        float: right;
    /* 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: 12px;
        position: relative;
        text-align: center;
        cursor: pointer;
        width: auto;
        float: right;
        line-height: 13px;
        height: 16px;
        font-family: Verdana, Geneva, sans-serif;
        font-variant: normal;
        font-style: normal;
        color: #1f3d73;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        width: auto;
        position: absolute;
        left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
        left: auto;
        width: 8.7em;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        width: 7em;
        text-align: left;
        height: 25px;
        background-color: #1f3d73;
        border-color: #FFF;
        border-right-style: solid;
        border-right-width: thin;
        border-left-style: solid;
        border-left-width: thin;
        border-bottom-style: solid;
        border-bottom-width: thin;
    /* 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
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        padding: 0.5em 0.75em;
        color: #fff;
        text-decoration: none;
    /* 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: #1f3d73;
        color: #1f3d73;
    /* 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: #1f3d73;
        color: #96B0E2;
    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
        background: #1f3d73;
        float: left;

  • Unwanted space under menu item

    When hovering over a menu item, the item turns red.  However, you can still see a little bit of the yellow background along the bottom.  Can anyone tell me what I need to fix to get the red box to fill the space?  Thanks.
    @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;
        cursor: default;
        width: 960px;
        font: bold;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
        z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: inherit;
        cursor: pointer;
        width: 160px;
        float: left;
        border: 0;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        width: 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
        left: auto;
        text-align: left;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        width: 160px;
    /* 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;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #f6ead6;
        padding: 0.5em 0.75em;
        color: #333;
        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: #80290e;
        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: #80290e;
        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;
        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: right;
        background: #FFF;

    Looks like it was just a minor bit of extra coding. Remove the line height here. Seems to fix it for me.
    a:hover, a:active, a:focus {
        line-height: 1.2;    text-decoration: none;

Maybe you are looking for