Third level Menu CSS?

HI folks,
I'm working on a third level menu and I need a CSS fix for this, and I'm not sure I understand why it is dropping down  instead of flying out...
To see the menu in action, go here : http://bendannie2.businesscatalyst.com/Sale  and hover over  the On Sales menu.  The third level menu is dropping down and when I try to move it right with a left margin, the container box remains in place and only the text  li     moves right...
And it really shouldn't display until I'm hovering over the Cartier Jewelry link...
TIA,
Jeff
The code so far is:
nav ul ul {
    background: #FFFFFF/*url(images/nav-current.png) repeat-x scroll center top*/;
    opacity:0.8;
filter:alpha(opacity=90); /* For IE8 and earlier */
    -moz-box-shadow: 0px 3px 5px 0px rgba(68,68,68,0.7);
    -webkit-box-shadow: 0px 3px 5px 0px rgba(68,68,68,0.7);
    box-shadow: 0px 3px 5px 0px rgba(68,68,68,0.7);
    left: -999em;
    list-style: none outside none;
    margin: 0;
    padding: 4px 0 0;
    position: absolute;
    top: 89px;
    width: 12em;
nav li:hover ul,
nav li.sfhover ul{
    left: auto;
nav ul ul ul li{
    background: none;
    border-bottom: 1px solid #6699FF;
    list-style: none;
    margin: 0 0 0  0px;
    padding: 0;
nav ul ul li{
    background: none;
    border-bottom: 1px solid #6699FF;
    list-style: none;
    margin: 0 0 0 -20px;
    padding: 0;
    nav ul ul li a:link,
    nav ul ul li a:visited{
    color: #3399FF;
    display: block;
    font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif, "Bitstream Vera Sans";
    font-size: 12px;
    padding: 8px 5px;
    text-decoration: none;
    nav ul ul li a:active,
    nav ul ul li a:hover{
    background: #e4e4e4;
    color: #3366FF;
    padding: 8px 5px;

HI folks,
I'm working on a third level menu and I need a CSS fix for this, and I'm not sure I understand why it is dropping down  instead of flying out...
To see the menu in action, go here : http://bendannie2.businesscatalyst.com/Sale  and hover over  the On Sales menu.  The third level menu is dropping down and when I try to move it right with a left margin, the container box remains in place and only the text  li     moves right...
And it really shouldn't display until I'm hovering over the Cartier Jewelry link...
TIA,
Jeff
The code so far is:
nav ul ul {
    background: #FFFFFF/*url(images/nav-current.png) repeat-x scroll center top*/;
    opacity:0.8;
filter:alpha(opacity=90); /* For IE8 and earlier */
    -moz-box-shadow: 0px 3px 5px 0px rgba(68,68,68,0.7);
    -webkit-box-shadow: 0px 3px 5px 0px rgba(68,68,68,0.7);
    box-shadow: 0px 3px 5px 0px rgba(68,68,68,0.7);
    left: -999em;
    list-style: none outside none;
    margin: 0;
    padding: 4px 0 0;
    position: absolute;
    top: 89px;
    width: 12em;
nav li:hover ul,
nav li.sfhover ul{
    left: auto;
nav ul ul ul li{
    background: none;
    border-bottom: 1px solid #6699FF;
    list-style: none;
    margin: 0 0 0  0px;
    padding: 0;
nav ul ul li{
    background: none;
    border-bottom: 1px solid #6699FF;
    list-style: none;
    margin: 0 0 0 -20px;
    padding: 0;
    nav ul ul li a:link,
    nav ul ul li a:visited{
    color: #3399FF;
    display: block;
    font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif, "Bitstream Vera Sans";
    font-size: 12px;
    padding: 8px 5px;
    text-decoration: none;
    nav ul ul li a:active,
    nav ul ul li a:hover{
    background: #e4e4e4;
    color: #3366FF;
    padding: 8px 5px;

Similar Messages

  • Adding third level to my menu

    I have a menu that I am working on:
    http://www.newbuild.twsco-specgas.com/index.html
    It was a mega menu (Modified jQuery Superfish) that someone helped me build for an intranet application. I am copying and carrying over to this new website, while giving it a major overhaul (simplication).
    My conundrum is how to add a third level. It seem like html code and subsequent css styling but it has me stumped. Can someone look at the "About TWSCO" drop down and see if they can discern what my failure is?
    Thanks!!
    Rob

    Hi Robert. Could you change the text color to something othere than white so we can see it
    #sf-menu li.sfHover ul a, #sf-menu ul li a, #sf-menu ul li a:visited { 
        background: url("") repeat scroll 0 0 transparent; 
        border: medium none;
        color: #FFFFFF;
        display: block;
        float: left;
        font-size: 11px;
        font-weight: bold;
        height: auto;
        padding-right: 3px;
        padding-top: 3px;
        position: relative;
        text-align: left;
        text-transform: none;
        width: auto;
    Unfortunatel I am having no success at getting my 3ed level to work

  • How to create second or third level  of  menu bar in se41 ?

    Hi All
      How to create second or third level  of  menu bar in se41 ?
      I created it once but forgotten , do anybody remember ?
    Regards
    Jaman
    Message was edited by:
            ABAP Techie

    Hi..,
    Once you have created a menu bar, you enter the individual menu entries. Each menu can contain up to 15 entries.
    A menu can contain any of the following:
    Function names (with function code and text)
    Submenus (pull-down menus)
    Separators
    You may include submenus up to three levels deep.
    Menu functions that logically belong together are grouped together using separators. This makes the menu easier to use. Separators also make long menus easier to read by dividing them into smaller parts.
    Defining Menu Functions
    To add functions to a menu that is already open in the Menu Painter:
    Open a menu list in the menu bar by double-clicking the menu title.
    The system opens the menu. The menu entries list contains the two columns Code and Text.
    In the Code column, enter a function code (this may be up to 20 characters long).
    If you want to enter a function code that is longer than the input field, you must first change the displayed length of the field in the user settings. (Choose Utilities ® Settings ® User-specific.)
    Enter the function text in the Text column.
    The name you enter here appears in the menu at runtime. You can also determine the contents of function texts at runtime (see Defining Dynamic Function Texts).
    Repeat steps 2 and 3 for each item in the menu.
    Creating Cascading Menus
    To add a cascading menu (sub-menu) to a menu:
    Leave the Code column blank.
    Enter a menu name in the Text column.
    Double-click the cascading menu to open it.
    The system opens the menu entry list for the cascading menu.
    Complete the menu as you would any other.
    Inserting Separators
    Place the cursor on a line.
    Choose Edit ® Insert ® Separator.
    If you want to insert a separator between two existing menu entries, place the cursor on the line before which you want to insert the separator.
    Editing Menu Entries
    You can cut, copy, paste, and delete menu entries.
    Place the cursor on a line.
    Choose Edit ® Entry ® Cut (or Copy, or Paste, or Delete).
    If you double-click a function code, the Function Attributes dialog box appears. Here you can, for example, change the icon assigned to a function.
    regards,
    sai ramesh

  • Add third level submenu to spry menu bar

    I want to add a third level submenu to my Horizontal Spry
    Menu Bar. I have read that I cannot do this in design mode but
    rather have to program it in using the code view. Does anyone know
    how to accomplish this? Thanks so much!

    Its OK! I've just found an answer:
    http://forums.adobe.com/message/1049136#1049136
    PS. I did searching before I posted - but I didn't spot this till afterward

  • Multiple/nested levels in CSS horizontal drop menu

    I am working on updating my horizontal menu and I need to have a nested menu inside the dropdown to display to the right of its parent menu.
    Example:
    <ul id="navbar">
    <li><a href="#">Paper &amp; Printing &#9660;</a>
    <ul>
    <li><a href="paper.html">Copy &amp; Printer Paper</a>
           <ul>
                <li><a href="letter">Letter</a></li>
                <li><a href="legal">Legal</a></li>
                <li><a href="ledger">Ledger</a></li>
                <li><a href="computer">Computer</a></li>
                </ul>
    </li>
    <li><a href="pads.html">Tablets &amp; Notebooks</a></li>
    <li><a href="art.html">Art Paper &amp; Supply</a></li>
    <li><a href="printaccess.html">Ink &amp; Toner</a></li>
    </ul>
    </li>
    I want the types of paper (i.e. letter, legal, ledger...) to pop out to the right of the parent "Paper & Printing"  -> "Copy & Printer Paper"  .  I know I'm lacking the css for #navbar ul li ul li and so on, but everything I have tried doesnt work.
    Here is the css I have so far:
    http://www.liquidatorswarehouse.net/css/menu.css
    Thanks for any help

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Paper &amp; Printing &#9660;</a>
        <ul>
          <li><a href="paper.html">Copy &amp; Printer Paper</a>
            <ul>
              <li><a href="letter">Letter</a></li>
              <li><a href="legal">Legal</a></li>
              <li><a href="ledger">Ledger</a></li>
              <li><a href="computer">Computer</a></li>
            </ul>
          </li>
          <li><a href="pads.html">Tablets &amp; Notebooks</a></li>
          <li><a href="art.html">Art Paper &amp; Supply</a></li>
          <li><a href="printaccess.html">Ink &amp; Toner</a></li>
        </ul>
    </ul>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

  • Odd spry menu / css positioning

    Hi folks,
    Working on a site with a Spry menu - looks as expected in IE,
    but totally
    out of whack in FF and Safari. Any suggestions to what I'm
    missing?
    http://www.applicationdynamics.com/Clients/pwj/
    I'm sure I'm just neglecting to configure the CSS correctly
    but haven't
    found the trick yet.
    Thanks!
    Lawrence
    Cartweaver.com

    "Lawrence *Adobe Community Expert*"
    <[email protected]> wrote in
    message news:g915h6$t2o$[email protected]..
    > Never mind.... Got it.
    Hi Lawrence,
    Maybe you got the part of it you caught as an issue, but it
    still doesn't
    work very well in IE7. The links are not being treated as
    blocks so unless
    you are moused over the actual text in a submenu, it will
    snap shut.
    I'd recommend a better menu, but you should be able to fix
    this easily
    enough and so long as there are not third-level flyouts,
    usability with Spry
    is OK.
    Al Sparber - PVII
    http://www.projectseven.com
    Fully Automated Menu Systems | Galleries | Widgets
    http://www.projectseven.com/go/Elevators

  • How to have some top level menu items not be hyperlinks

    I have a navigation band where 5 of the 6 top level items need to NOT be hyperlinks but simply "category titles" that you mouseover to display the submenu - which are the links to web pages.
    An example of this is on the Amazon.com home page - the items under "Shop All Departments" has categories that are not clickable, but when you mouseover display the clickable submenu.
    Is it possible to customize some but not all of the top menu items and how?
    What do I need to modify in the CSS so that the top "category title" looks/behave the submenu (same font color/bgcolor changes) but no active hyperlink?

    Here is a link to my pagewhere I am testing the navigation. Currently there is only this one page and I have <a href="#"> for the links.
    The only menu item that should be clickable in the top level is "Contact"
    Everything in the second and third level (Events > Research >...) needs to be clickable
    Everything is working as I want except that "Research" needs to be clickable
    - and I would like to have the clickable item text be underline when in the hover state but I want to get the base navigation working first
    The closest matching code I found in the CSS is:
    #MenuBar1 li .MenuBarItemSubmenu,
    #MenuBar1 li ul li .MenuBarItemSubmenu {
        cursor: default;
    If I remove this, all the top level items become clickable. Let me know if there is other information you need. I super appreciate your help with this!

  • Table of content, third level leader lines

    Hello i have atable of content that works properly now, except for the fact that third level chapters, dont have leader lines to the page number
    1 blabla .............5
    1.1 blasecond.....7
    1.1.3 third lvl 9
    I want that third lvl style to also have leader line,
    i tried following this article http://docs.info.apple.com/article.html?path=Pages/3.0/en/c3pg49.html
    but the leader menu is disabled...
    thank you
    charles.

    Hi Charles,
    If you select the text of the TOC level you're trying to edit, go to the Text Inspector, click on "Tabs," and then go down to "Tab Stops" and select the number that's within the box, the option should no longer be greyed out.
    Hope that helps! Let me know if it doesn't.

  • HP 8500 won't give the option to perform a third level print head cleaning

    I'm not sure why I care since every time I clean the heads the printer is actually worse but the printer never gives me the option to go to level three cleaning.
    The steps
    * Go to clean print head option in the menu
    * Printer goes through cleaning process possibly being momentarily interuppted by the check device process
    * printer goes to aligning printer because no matter what is printed it always goes to aligning printer afterward 
    * printer fails align and I hit ok
    * printer allows the me to start the second level of cleaning and I start it
    * repeat from 2nd step
    I'm never given the option to go to the third level.
    I have a nice 20 minute video of this. and that's only one cycle....
    This happened before and after I updated to the latest firmware.
    In regards to my first statement.  I started cleaning the print heads because the magenta stopped printing and after cleaning heads several times no colors or black print anymore.  I few days later somehow the printer started prininting again very poor quality and again no magenta so again cleaning the heads caused it to stop printing at all.

    Hey @Taylor2813,
    Welcome to the HP Support Forums!
    I understand that you're experiencing print quality issues with your HP Officejet 8500 All-in-One. I would like to work with you today. I did want you to be aware that it is generally not a good idea to run many cleans on your product. Level 1 and Level 2 just run a similar cleaning process. If you want to run a third level cleaning you could manually go into the menu on the printer and simply run another clean. Because the cleaning process uses ink to flush the ink system on your product, should you need to run a third clean on the product be aware that it will be just using a lot of ink for the process. Generally the rule of thumb is: should the first clean and second clean not make a difference don't continue as it will just waste ink.
    Because the cleans you have been running up to this point have made no difference and actually caused your issue to become worse, I do believe that your issue actually lies with your printheads. You have two printheads in your printer. One is the Black and Yellow and the other is the Cyan and Magenta. They control the ink going on your paper. If the Printheads are defective you will experience print quality issues. If the issue just affects Magenta than you may just have a defective Magenta printhead (should a new Magenta cartridge not resolve your issue). However, if the issue affects all colours and black than it would be a defect with both printheads.
    For your reference I will include the Print Quality Troubleshooting document for both versions of the Officejet 8500 series:
    HP Officejet Pro 8500A A910a: Fixing Print Quality Issues
    HP Officejet Pro 8500 A909a: Fixing Print Quality Issues
    In both of those documents you can see that should the cleaning not resolve the issue after 3 attempts than it is time to replace one or both printheads.
    Should you want to look into ordering printheads I suggested calling our Technical Support.
    HP Technical Support can be reached at : 1800-474-6836
    If you live outside the US/Canada Region, please click the link below to get the support number for your region.
    HP Worldwide Contact
    Please let me know if this information is useful. I wish you luck with resolving this print quality issue!
    X-23
    I work on behalf of HP
    Please click "Accept as Solution" if you feel my post solved your issue, it will help others find the solution.
    Click the "Kudos, Thumbs Up" on the right to say "Thanks" for helping!

  • Third level Drill Down report

    Hi,
    I have a requirement to create the report using Crystal Reports 2008 up to 3 levels of drill-down. I tried to create it but I can create up to only 2nd level of drill-down.
    Is it possible to create 3rd level of drill-down. If yes, please let me know how to create it.
    Thanks in advance.
    Regards,
    Neel.

    Hi Neo,
    I use on-demand sub-reports.
    Example:
    If main report is for Customer summary which shows the amount received from customer.
    Then for 2nd level of drill-down I will insert an on-demand sub-report. This sub-report will show the sales order numbers for that particular customer.
    Now for third level of drill-down, I want show the details of sales orders (i.e., all the sales order lines of that particular sales order). So I am trying to insert a sub-report in existing sub-report, but here the sub-report option in the menu is already disabled.
    Regards,
    Neel.

  • Dark grey square appearing behind every first sub-level menu

    I have created a horizontal Spry menu - it works perfectly in all major Windows browsers, except for one thing, there's a dark grey (probably the hover color) box slightly offset behind every first sub-level menu. I think it is a css issue - I have tried disabling my main stylesheet without any effect - so there is something with the SpryMenuBarHorizontal.css - but I can't figure it out.
    See http://www.perberntsen.com/ The Spry stylesheet is here
    Thank you.

    Hi Per,
    Delete line 113 of your CSS as per example:
    ul.MenuBarHorizontal ul
    border: 1px solid #000;  /* Border around the Submenu blocks */
    Rather than modifying the original Spry-stylesheet, create a new stylesheet (myStyle.css) that loads after the Spry-stylesheet, and place your mods in the new sheet. That way it will be easier to track down problems.
    Hopefully this helps.
    Ben

  • A top level menu item should display its active state if any of its submenu items are active

    Example case: I'm designing a Muse site which is basically a portfolio of our work. We design books, doing page layout and covers. We have numerous book categories and sub categories which I put in a horizontal menu. When a given top level category menu item doesn't have a submenu, it is a hyperlink and it displays active state when the browser displays its linked page. But when a given page is displayed from a submenu link, its top level menu item does NOT display active state. I think it should.
    For example, we have a "Nostalgia" category which has "Film" and "TV" subcategories. Because the menu item, "Nostalgia" has a submenu containing "Film" and "TV", the label "Nostalgia" is not a hyperlink. The submenu attached to it has the two hyperlinked items "Film" and "TV". When the browser is displaying either linked page, the submenu is hidden. So it would be nice if the top level item, "Nostalgia" would display in an active state.

    Hello Daniel,
    As of now this feature is not there in Adobe Muse.
    I would suggest you to please log this as a feature request in our "Ideas for features in Adobe Muse" section. (http://forums.adobe.com/community/muse/ideas)
    Hope this helps.
    Regards,
    Sachin

  • Customize menu css

    I'm trying to change the background to a Menu inside a MenuBar. I was able to change the MenuItem's background, but there's this gap at the top and at the bottom of the menu which is still gray, and I can't seem to find a way to change it.
    This is my code
    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.control.*;
    import javafx.stage.Stage;
    public class CustomizeMenu extends Application {
      public static void main(String[] args) { launch(args); }
      @Override public void start(Stage stage) {
        MenuBar mb = new MenuBar();
        Menu menuFile = new Menu("File");
        Menu menuView = new Menu("View");
        menuView.getItems().addAll(new CheckMenuItem("All"), new CheckMenuItem("None"));
        menuFile.getItems().addAll(new MenuItem("Open"), menuView, new MenuItem("Close"));
        mb.getMenus().add(menuFile);
        Group g = new Group(mb);
        Scene scene = new Scene(g, 400, 300);
        scene.getStylesheets().add(CustomizeMenu.class.getResource("custom-menu.css").toExternalForm());
        stage.setScene(scene);
        stage.show();
    }This is my css
    .menu  {
      -fx-background-color: blue;
      -fx-text-fill: white;
    .menu-item{
        -fx-background-color: blue;
    .menu-item .label {
      -fx-text-fill: white;
    .menu-item:focused .label {
      -fx-text-fill: white;
    }Any help would be much appreciated, thanks.

    ascuccimarra wrote:
    Thanks for your response David, that did the trick. Didn't even find a reference to it in caspian.css. This definitely seems something that could be improved. Hope this thread helps others.ContextMenuContent is inserted into the scene graph when the menu is rendered. Basically it seems belong to the skin. You can find out about this with ScenicView if you manage to get hold of the scene used by the ContextMenu popup (I could do this with a CustomMenuItem). Regarding the css, David simply used the classname as selector as documented in the css reference.

  • Images are not reflecting in Multi Level Menu

    Hi,
    i am facing some problem in the Multi Level Menu.
    i have created a book in my portal application.
    For the "Main Page Book" i am setting "Multi Level Menu"
    For the Book with in the menu, i am setting "No Navigation"(to avoid the sub pages displaying when clicking the book)
    for example the Book name is "Home".
    i want to replace the Home with some images.
    using "selected image" i have placed some .gif
    when i have checked at run time that image is not reflected.
    when i keep the menu as "Single level menu" images are coming. (but drop down is not coming)
    the problem is when i put the menu as "multi level menu" the images are not reflected.
    pls help me to solve this issue.
    regards.

    Hi,
    we've got the same issue in the project I'm working on. We told thos to BEA and they said that this is not coded. So 2 BEA's consultants are working on it for us. May be it will be included in the next version of WLP...
    Tom

  • Third-party menu extras?!?

    OK, so I upgraded to Snow Leopard. Since it was a clean install, I had to reinstall al my old software. Here's a few of them that don't work anymore, thanx to Apple's new policy (whatever that may be) towards third party menu extras : Menu Meters, Toast&Mount (Toast Titanium), Move Items X. Funyy, I get the message sayong something like "Bla Bla....read the documentation" . What documentation... and how do I make them work anyway ?

    Apple is not responsible for the failure or slowness of third-party developers to update their software for compatibility with new OS versions. They have access to the new OS software long before the public does, and if they can't or don't adapt their software to it, it's no one's fault but their own.
    Visit the websites of your software's developers, make sure you have the latest version of each software item, and if it doesn't work in Snow Leopard, complain to the developer.

Maybe you are looking for