@charset "iso-8859-1"; /******************************************************************************* * rMenu.css : 2006.09.18 * ----------------------------------------------------------------------------- * Ruthsarian Menus - A CSS-based dropdown menu system * * * * NOTES * - Setting position: relative; to ul.rMenu triggers a bug in Netscape 7 * and earlier that makes content jump as menus pop * - Need to remember that when assigning multiple classes to an element * to list them left-to-right from most-specific to least-specific. * Otherwise IE/Mac flips out * - IE/Mac needs whitespace before tags in the markup * otherwise very odd things can happen * * EXAMPLE HTML * * *******************************************************************************/ /******************************************************************************* * General Menu Mechanics * * Below is a set of rules which is applicable to any list used within * this dropdown menu system. You could apply just these rules and get * a basic dropdown menu system working just fine in FireFox, Opera, * Safari, and most other modern browsers. IE6 and earlier.. not so much. */ ul.rMenu, ul.rMenu ul, ul.rMenu li { margin: 0; padding: 0; list-style: none; } ul.rMenu ul { position: absolute; /* removes the UL element from the flow of the document. this means the browser won't make room in the layout for whever this element is to appear. */ display: none; /* hide it by default until its parent LI element enters the :hover state (has focus) */ } ul.rMenu li { z-index: 1; position: relative; /* needed so sub-menus pop relative to their the parent menu item */ } ul.rMenu li:hover { z-index: 2; } ul.rMenu li:hover > ul { display: block; z-index: 3; } ul.rMenu li a { display: block; cursor: pointer; } ul.rMenu:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /******************************************************************************* * Vertical Menu Mechanics * * Below are rules that apply to vertical menus only * * NOTE: the rMenu-vWide class is for vertical menus that should take whatever * width they can get (width: auto) rather than a fixed width * (width: 15em). This is something that should only be applied to your * topmost menu level. Anything deeper in the menu tree will look * horrible. */ ul.rMenu-v, ul.rMenu-v ul { width: 10em; } /******************************************************************************* * Drop Positions * * The rules below allow you to define where dropmenus appear relative to their * parent LI element. The first few rules will define default positions for * drop menus. After that will be special custom positioning classes. You must * specifically set the class to each and every UL element you want to drop * in that special position. There is no cascading effect here because it leads * to a host of problems. * * DEV NOTE: use left/right to control alignment and margins to setup dropdown * overlapping */ /* default drop position, immediately below the parent element * with the left edge of aligned with parent's left edge */ ul.rMenu ul { margin: 1px 0 0 0; /* the 1px top margin is there to align the top border of the dropdown menu with the bototm border of the parent element. the menu isn't aligned properly by default because of the negative margins used to get LI element borders to overlap. */ top: auto; left: 0; } /* Children of vertical menus should overlap the parent in a style that * conveys hierarchy */ ul.rMenu-v ul { margin-top: -10px; margin-left: 90%; } /******************************************************************************* * Visual Style * * This block of style should try to contain all visual-presentation related * rules. Colors, font family, etc. * * A note on borders: * Where borders for each menu item get drawn is a bit tricky. If you * draw all four sides of the border for each element then you need to overlap * elements so that you don't get double-wide borders where elements touch. To * overlap elements use negative margins. But some browsers hiccup when you put * negative margins on certain elements. Another approach is to apply borders * to just the bottom and right sides of each LI element and thend raw the * top and left borders of the containing UL element. This works really really * well. Except in the case of horizontal menus. If you want the horizontal * borders of your horizontal menu to carry across the entire width of the * page, then the above method works great. But if you don't want that border * then you're stuck drawing the border on the LI elements. So to that end, * I've employed the negative margin method. I've found the best results to * be when the borders are drawn on the LI elements and not the anchor * elemenets. */ ul.rMenu li { border: solid 1px #99f; margin: -1px; /* negative margins to get borders to overlap where elements touch. */ } ul.rMenu li a { /* NOTE: do not define a background color here, otherwise the 2-tier * color system used below will not work. */ color: #009; text-decoration: none; padding: 2px 5px 3px 5px; /* padding is applied here and not the parent LI element because we want the whole area of the menu item to be selectable and not just the area 2 or 3 pixels from the border. */ } ul.rMenu li a:hover { background-color: #ffc; /* the background color of menu items that the user's mouse is immediately over */ } ul.rMenu li { background-color: #ddf; /* default background color of menu items when not having focus from the user */ } ul.rMenu li:hover { background-color: #eda; /* the background color of a menu item whose child menu currently has focus. this allows you to visually indicate the path the user took to get to their current menu menu selection */ } /******************************************************************************* * * * CSS targeted at a single menu as a means to demonstrate and debug issues with * dropdown menus for the given platform. */ #menu-01 li { width: 10em; } #menu-02 li { width: 10em; float: left; clear: left; } #menu-03 li { width: auto; } #menu-04 li a { zoom: 1; } #menu-05 li { margin: 0; } #menu-05 li, #menu-05 ul.rMenu-v li { margin-bottom: -1px; } #menu-05 li a { width: auto; min-width: 0; } #menu-06 ul { background-color: #fff; } #menu-06 li { margin: 0; } #menu-06 li, #menu-06 ul.rMenu-v li { margin-bottom: -1px; } #menu-06 li a { width: auto; min-width: 0; } /******************************************************************************/