/* ========== Horizontal Sub-Menu ========== */ .subMenu { width: 600px; margin: 0; padding: 0; /* if L/R non-zero, adds to 100% width, and extends too far. */ border: 0; /*background: #22D;*/ /*background: #696A6C;*/ text-align:center; list-style: none; text-indent: 0; display: block; } .subMenu ul { list-style: none; text-indent: 0; width: auto; display: block; margin: 0 0 0 0px; padding: 0px 0px 0px 0px; border: 0; text-align:center; width: 600px } .subMenu li { list-style-type: none; text-indent: 0; display: block; float:left; margin: 0 0 0 0; /* gap between tabs. NOTE: if "left" is non-zero, IE6-7 loses margin when hover. */ padding: 0 0 0 0; /* "border" below each li, to give separation if wrap to multiple rows. */ border: 0; text-align:center; color: #000000 } .subMenu a { text-decoration: none; text-align: center; display: block; /* To fill the li's height. */ margin: 0; padding: 0 0 0 0; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration: none; font-size: 12px; } .subMenu a:link { text-decoration: none; /* override any main stylesheet */ } .subMenu a:visited { text-decoration: none; /* override any main stylesheet */ } .subMenu a:hover { color: #EB7171; } .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 { /*font-weight:bold; color: #000000;*/ color: #EB7171; }