/* ========== Horizontal Sub-Menu ========== */ .subMenu { width: 100%; margin: 0; padding: 0; /* if L/R non-zero, adds to 100% width, and extends too far. */ border: 0; /*background: #0E1E7D;*/ } .subMenu ul { list-style: none; text-indent: 0; width: auto; display: block; margin: 0 0 0 0px; /* left-align: left of bar. */ padding: 4px 0px 3px 0px; /* top/bottom "borders". */ border: 0; } .subMenu li { 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; color: #104369 } .subMenu a { text-decoration: none; text-align: center; display: block; /* To fill the li's height. */ margin: 0; padding: 1px 3px 1px 3px; font-family: Arial, Helvetica, sans-serif; color: #104369; text-decoration: none; font-size: 10px; text-transform: lowercase } .subMenu a:link { text-decoration: none; /* override any main stylesheet */ } .subMenu a:visited { text-decoration: none; /* override any main stylesheet */ } .subMenu a:hover { color: #e98a19; } .subMenu a:focus { } .subMenu a:active { } /* An alternate to "menu.js", is to add these as you add menu items. Requires adding id to each html tag, e.g., #home .subMenu .home a, #main1 .subMenu .main1 a, #main2 .subMenu .main2 a, #main3 .subMenu .main3 a, #main4 .subMenu .main4 a, */ .subMenu .currentPageMenuItem a { color: #e98a19; }