/* ========== Horizontal Drop-Down Menu ========== */ .clearfloats { clear: both; width: 1%; /*TBD & height? for IE 5?*/ line-height: 1px; font-size: 1px; margin: 0 0 -1px 0; /* NO EFFECT? so total height is zero. */ margin: 0;/*TEST*/ padding: 0; } .menu { width: 100%; /*float: left; / * NO: Can expose an IE bug that makes next item vanish. "clears" the interior floating elements. */ margin: 0; padding: 0; /* if L/R non-zero, adds to 100% width, and extends too far. */ border: 0; } .menu ul { list-style: none; width: auto; display: block; margin: 0 0 0 1px; /* left of bar. */ padding: 1px 0 0 0; /* top "border". */ border: 0; } .menu li { position: relative; /* for interior absolutes. */ list-style-type: none; text-indent: 0; display: block; float: left; margin: 0 1px 0 0; /* gap between tabs. NOTE: if "left" is non-zero, IE6-7 loses margin when hover. */ padding: 0 0 1px 0; /* "border" below each li, to give separation if wrap to multiple rows. */ border: 0; } .menu a { text-decoration: none; /* override any main stylesheet */ display: block; /* To fill the li's height. */; margin: 0; padding: 2px 10px 2px 10px; background: #DDF; color: #00F; } .menu a:link { text-decoration: none; /* override any main stylesheet */ } .menu a:visited { text-decoration: none; /* override any main stylesheet */ } .menu a:hover { text-decoration: none; /* override any main stylesheet */ background: #44A; color: #DDF; } .menu a:focus { text-decoration: none; /* override any main stylesheet */ background: #44A; /* TAB ACCESSIBILITY */ color: #DDF; } .menu a:active { text-decoration: none; /* override any main stylesheet */ background: #44A; /* IE- TAB ACCESSIBILITY */ color: #DDF; } /* An alternate to markMenuForThisPage() in "menu.js", is to add these as you add menu items. Requires adding id to each html tag, e.g., ( and div.container are controlled by the attached DWT, so can't use them.) #home .menu .home a, #main1 .menu .main1 a, #main2 .menu .main2 a, #main3 .menu .main3 a, #main4 .menu .main4 a, */ .menu li.currentPageMenuItem a { background: #22D; color: #BBD; } /* ----- Sub-menu (second level) ----- */ .menu li ul { background: #44A; } .menu li ul li { clear: both; margin: 0; background: #44A; /* Firefox [main ul doesn't extend width of li] */ } .menu li ul>li:first-child { padding-top: 1px; /* Firefox [main ul doesn't extend width of li] */ } .menu li ul a { width: 110px; margin: 0 1px 0 1px; /* edges */ } .menu li ul { position: relative; /*NO position: absolute; NO-ACCESSIBILITY - override in javascript. visibility: hidden; NO-ACCESSIBILITY Override elsewhere for IE<7 */ /*display: none; / *TEST*/ z-index: 9999; } .menu li:hover>ul { /* Firefox. REDUNDANT if javascript "doHoverMe=true". */ visibility: visible; } .menu li.hoverme ul { visibility: visible; /* NO EFFECT: Javascript hiding masks this. */ } /* Revert submenu back to un-hovered colors. */ .menu li.currentPageMenuItem ul a { /* Firefox: for current-color column. */ background: #DDF; color: #00F; } .menu li.hoverme ul a { background: #DDF; color: #00F; } /* Hover sub-menu item. (override the above revert rules). */ .menu li ul a:hover { background: #44A; color: #DDF; } .menu li ul a:focus { /* Firefox: TAB ACCESSIBILITY */ background: #44A; color: #DDF; } .menu li ul a:active { /* IE: TAB ACCESSIBILITY */ background: #44A; color: #DDF; } /* Finally, Re-Revert sub-menu current item. */ .menu li ul .currentPageMenuItem a { background: #22D; color: #BBD; } /* ----- If third level, need more rules ----- */