a simple CSS menu fly out solution

Instead of simply stacking a menu with 2nd level menu items indented below the parent menu item, a more sophisticated solution is to have them hidden until the parent menu item is moused over.

A typical solution is to use JavaScript to hide the second level menu items. A simpler solution is to code them with CSS. An example of this code is the fly out sub-menu of the Solutions menu item. Using CSS also avoids display issues if your visitor has turned off JavaScript in their browser.

The basic concept is to hide the 2nd level menu items until they are needed - or moused over. To do that code the 2nd level items to the hidden "display: hidden;" until the parent is moused over. For them to display, code the parent with the "hover" pseudo-selector and the child with "display: block;" and you’re done. However, if you want them to line up with the parent, the sub-menu will need to be positioned accordingly.

The code used is displayed below:

/* MAIN MENU SECOND LEVEL FLYOUT STYLING */
View source
  1. div#main-menu div.moduletablemenu ul.menu ul {
  2.     display: none;
  3. }
  4.  
  5. div#main-menu div.moduletablemenu ul.menu li.item-121:hover ul {
  6.     display: block;
  7.     position: absolute;
  8.     z-index: 100;
  9.     margin-left: 160px;
  10.     margin-top: -50px;
  11. }
  12.  
  13. div#main-menu div.moduletablemenu ul.menu li.active:hover ul li a,
  14. div#main-menu div.moduletablemenu ul.menu li.active:hover ul li a:hover {
  15.     color: #fff !important;
  16.     font-weight: bold;
  17.     padding-left: 3px;
  18.     padding-top: 11px;
  19.     text-decoration: none;
  20. }
  21.  
  22. div#main-menu div.moduletablemenu ul.menu li.active:hover ul li a span.image-title,
  23. div#main-menu div.moduletablemenu ul.menu li.active:hover ul li a:hover span.image-title {
  24.     color: #fff;
  25.     padding-top: 15px;
  26. }

Details

  • Line 1: Specifies that the 2nd level menu list (ul) is the HTML tag affected.
  • Line 2: Specifies that the sub-menu (the second ul HTML tag) will be hidden.
  • Line 3: Closes the CSS instruction
  • Line 5: Specifies that when the "Solutions" menu item (ul.menu li.item-121:hover) is moused over that some action occurs on the sub-menu (the second ul HTML tag). That action is specified in lines 6 through 10.
  • Line 6: Changes the display of the sub-menu list to display as a block. This means that it becomes visible when a mouse pointer hovers over the "Solutions" menu item.
  • Line 7: Used to help Internet Explorer 7 (IE7) properly display the sub-menu fly out.
  • Line 8: Depending on the template being used, "z-index" is necessary to "lift" the menu above the surrounding page. See "z-index Opens new window" at W3C for more information.
  • Line 9: Moves the 2nd level menu list to the right of the main menu a distance equal to the width of the first level menu, in this case 160 pixels.
  • Line 10: Moves the 2nd level menu towards the top of the page a distance equal to the height of the first level menu item so that the top of the 2nd level menu is equal to the top of its parent menu item. Notice how the "Solutions" fly out sub-menu lines up with the top of the "Solutions" link item.
  • Line 11: Closes the CSS instruction.
  • Lines 13 - 26: Specific styling for this website. Obviously, this code would need to be changed for your own site.

This solution tests in current browsers except IE7. For IE7 to work, one of the parents of the child menu must be "position: relative;"

Cons

A CSS solution is "pointer specific", meaning that there is no delay if your pointer moves off the menu. For fly out menu to be delayed a JQuery delay function will need to be applied to it.

910-690-1179

Newsletter