#nav a { text-decoration:none; display:block; width:122px; height:40px; padding:0; margin:0 auto; text-indent:-9888px; overflow:hidden;} #nav #mn8 a { width:121px;} #subMenusContainer a { text-decoration:none; display:block; height:26px; padding:0px 10px 0 10px; min-width: 99px; width: auto !important; width: 99px;} /* Just main menu links --[for non-javascript users this applies to submenu links as well]*/ #nav a { margin:0; float:left; display:inline; } /* Just sub menu links */ #subMenusContainer a, #nav li li a { text-align:left } /* All menu links on hover or focus */ #nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused { color:#1bb0d8; } /*#nav a:hover, #nav a:focus { background:transparent url(../img/menu-bg.jpg) 0 -40px repeat-x; }*/ /* sub menu links on hover or focus */ #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused #nav li a:hover, #nav li a:focus { color:#1bb0d8; } /* Parent Sub Menu Links ---[javascript users only]*/ .subMenuParentBtn { background: url(../img-head/arrow_right.gif) right center no-repeat; } /* Parent Sub Menu Links on hover or focus ---[javascript users only]*/ .subMenuParentBtnFocused { background: url(../img-head/arrow_right_over.gif) right center no-repeat; } /* Parent Main Menu Links ---[javascript users only] .mainMenuParentBtn{ background: url(../img/arrow_down.gif) right center no-repeat; }*/ /* Parent Main Menu Links on hover or focus ---[javascript users only] .mainMenuParentBtnFocused{ background: url(../img/arrow_down_over.gif) right center no-repeat; }*/ /* ----[ OLs ULs, LIs, and DIVs ]----*/ /* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */ .smOW { display:none; position: absolute; overflow:hidden; /*the 2px left & right padding lets you have a 1px border on the ul or ol inside since overflow is set to hidden*/ padding:0 2px; margin:0 0 0 -2px; } /* All ULs and OLs */ #nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol { padding: 0; margin: 0; list-style: none; line-height: 1em; } /* All submenu OLs and ULs */ #nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol { /*border around submenu goes here*/ background:#8e1013; border:1px solid #000; left:0; padding:10px 0 0 0; } /* List items in main menu --[for non-javascript users this applies to submenus as well] */ #nav li { /*great place to use a background image as a divider*/ display:block; list-style:none; position:relative; float:left; display:inline; width:122px; height:40px; } #nav li#mn8 { display:block; list-style:none; position:relative; float:left; display:inline; width:121px; height:40px; } #subMenusContainer li { list-style: none; } /* main menu ul or ol elment */ #nav { display:block; list-style:none; margin:0 auto; z-index:5; display:inline; float:left; border-top:2px solid #fff; text-align: center; /*background:transparent url(../img/menu-bg.jpg) 0 0 repeat-x;*/ } #subMenusContainer { display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; } /* --------------------------[ The below is just for non-javscript users ]--------------------------*/ #nav li li { float:none; } #nav li li a { /* Just submenu links*/ position:relative; float:none; } #nav li ul { /* second-level lists */ position: absolute; width: 10em; margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ margin-top:2.2em; } /* third-and-above-level lists */ #nav li ul ul { margin: -1em 0 0 -1000em; } #nav li:hover ul ul { margin-left: -1000em; } /* lists nested under hovered list items */ #nav li:hover ul { margin-left: 0; } #nav li li:hover ul { margin-left: 10em; margin-top:-2.5em; } /* extra positioning rules for limited noscript keyboard accessibility */ #nav li a:focus + ul { margin-left: 0; margin-top:2.2em; } #nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em; } #nav li li a:focus { left:0; margin-left:1000em; width:10em; margin-top:0; } #nav li li li a:focus { left:0; margin-left: 2010em; width: 10em; margin-top:-1em; } #nav li:hover a:focus { margin-left: 0; } #nav li li:hover a:focus + ul { margin-left: 10em; } /*nav top*/ /*ul#nav li#mn2 a {width:127px; height:17px; display:block;}*/ ul#nav li#mn1 { background:transparent url(../img-head/menu-bg1.jpg) no-repeat 0 0; } ul#nav li#mn1 a:hover{background:transparent url(../img-head/menu-bg1.jpg) no-repeat 0 -40px;} ul#nav li#mn1 a.sel{background:transparent url(../img-head/menu-bg1.jpg) no-repeat 0 -40px;} ul#nav li#mn2 { background:transparent url(../img-head/menu-bg1.jpg) no-repeat -122px 0;} ul#nav li#mn2 a:hover{background:transparent url(../img-head/menu-bg1.jpg) no-repeat -122px -40px;} ul#nav li#mn2 a.sel {background:transparent url(../img-head/menu-bg1.jpg) no-repeat -122px -40px;} ul#nav li#mn3 { background:transparent url(../img-head/menu-bg1.jpg) no-repeat -244px 0;} ul#nav li#mn3 a:hover{background:transparent url(../img-head/menu-bg1.jpg) no-repeat -244px -40px;} ul#nav li#mn3 a.sel {background:transparent url(../img-head/menu-bg1.jpg) no-repeat -244px -40px;} ul#nav li#mn4 { background:transparent url(../img-head/menu-bg1.jpg) no-repeat -366px 0;} ul#nav li#mn4 a:hover{background:transparent url(../img-head/menu-bg1.jpg) no-repeat -366px -40px;} ul#nav li#mn4 a.sel {background:transparent url(../img-head/menu-bg1.jpg) no-repeat -366px -40px;} ul#nav li#mn5 { background:transparent url(../img-head/menu-bg1.jpg) no-repeat -488px 0;} ul#nav li#mn5 a:hover{background:transparent url(../img-head/menu-bg1.jpg) no-repeat -488px -40px;} ul#nav li#mn5 a.sel {background:transparent url(../img-head/menu-bg1.jpg) no-repeat -488px -40px;} ul#nav li#mn6 { background:transparent url(../img-head/menu-bg1.jpg) no-repeat -610px 0;} ul#nav li#mn6 a:hover{background:transparent url(../img-head/menu-bg1.jpg) no-repeat -610px -40px;} ul#nav li#mn6 a.sel {background:transparent url(../img-head/menu-bg1.jpg) no-repeat -610px -40px;} ul#nav li#mn7 { background:transparent url(../img-head/menu-bg1.jpg) no-repeat -732px 0;} ul#nav li#mn7 a:hover{background:transparent url(../img-head/menu-bg1.jpg) no-repeat -732px -40px;} ul#nav li#mn7 a.sel {background:transparent url(../img-head/menu-bg1.jpg) no-repeat -732px -40px;} ul#nav li#mn8 { background:transparent url(../img-head/menu-bg1.jpg) no-repeat -854px 0;} ul#nav li#mn8 a:hover{background:transparent url(../img-head/menu-bg1.jpg) no-repeat -854px -40px;} ul#nav li#mn8 a.sel {background:transparent url(../img-head/menu-bg1.jpg) no-repeat -854px -40px;}